> 웹 프론트엔드 > HTML 튜토리얼 > 6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose

6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:34:34
원래의
1226명이 탐색했습니다.

这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。

在线预览    源码下载

 使用方法

 HTML结构

该CSS3按钮边框动画特效中的按钮使用HTML的

<button class="draw">draw</button>       
로그인 후 복사

CSS样式

在CSS样式中,首先为按钮设置一些基本样式,去掉原生按钮的样式。

button {  background: none;  border: 0;  box-sizing: border-box;  box-shadow: inset 0 0 0 2px #f45e61;  color: #f45e61;  font-size: inherit;  font-weight: 700;  margin: 1em;  padding: 1em 2em;  text-align: center;  text-transform: capitalize;  position: relative;  vertical-align: middle;}button::before, button::after {  box-sizing: border-box;  content: '';  position: absolute;  width: 100%;  height: 100%;}            
로그인 후 복사

以上是第一种线条动画效果的制作方法。其它效果的CSS代码请参考下载文件。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿