前言:
此刻姐妹们对“css3漂亮按钮”可能比较注意,我们都需要知道一些“css3漂亮按钮”的相关资讯。那么小编也在网络上汇集了一些对于“css3漂亮按钮””的相关资讯,希望朋友们能喜欢,兄弟们一起来学习一下吧!不论是设计还前端开发,设计和制作个特效按钮,对于他们来说,是习以为常的事情,下面是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框,文本动画以及流光动画效果,各种效果都非常有创意。
演示地址:
使用方法
HTML结构
按钮的HTML结构使用嵌套<div>结构来制作。这里以第6种效果为例。
<div class="wrapper-inner-tab-backgrounds-first">
<div class="sim-button button6">
<span>Login</span>
</div>
</div>
css样式
.button6{
color: rgba(255,255,255,1);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
border: 1px solid rgba(255,255,255,0.5);
position: relative;
}
.button6 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
按钮中的文本采用绝对定位。
.button6 span{
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
鼠标滑过时动画的元素是一个::before伪元素,它被设置为绝对定位。这个效果开始时伪元素的大小为这个按钮的一半大小,透明度为0。在鼠标滑过的时候,它会被放大到按钮大小,透明度过渡为1。
view sourceprint?
.button6::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
background-color: rgba(255,255,255,0.5);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}
.button6:hover::before{
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
切图网(qietu.com)是首家专门从事web前端开发的公司,专注we前端开发,响应式布局,webapp手机端网页制作,微信html5页面制作,bootstrap布局等,关注用户体验。
标签: #css3漂亮按钮