30种CSS3动画特效按钮

yund56 2025-04-11 01:59 8 浏览

不论是设计还前端开发，设计和制作个特效按钮，对于他们来说，是习以为常的事情，下面是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框，文本动画以及流光动画效果，各种效果都非常有创意。

演示地址：
http://www.htmleaf.com/Demo/201510282718.html

使用方法

HTML结构

按钮的HTML结构使用嵌套

结构来制作。这里以第6种效果为例。

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动画效果案例

上一篇：详解CSS3中的动画效果:从基础到进阶实战
下一篇：CSS3 动画——Animations

30种CSS3动画特效按钮

相关推荐

django留言板_留言板html好看的模板

一次分享给你29个PHP基础常用类助力你快速提升

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一篇文章轻松掌握VLookup、XLookup与Filter函数

新函数FILTER函数_filter函数的作用

初学ThinkPHP(一):用TP6+LayUI实现数据表格

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

Excel筛选也智能?一个FILTER函数就搞定!

营商在上海_营商上海数字科技有限公司