css3制作鼠标经过按钮特效

来源：懂视网责编：小OO 时间：2020-11-27 18:51:33

css3制作鼠标经过按钮特效

今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图。实现的代码。html代码。XML/HTML Code复制内容到剪贴板。<；p align="；center"；>；<；p class="；contener"；>；<；p class="；txt_button"；>；WIFEO<；/p>；<；p class="；circle"；>；<；/p>；<；/p>；<；/p>；。css3代码。CSS Code复制内容到剪贴板。

推荐度：

点击下载本文 文档为doc格式

导读今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图。实现的代码。html代码。XML/HTML Code复制内容到剪贴板。<；p align="；center"；>；<；p class="；contener"；>；<；p class="；txt_button"；>；WIFEO<；/p>；<；p class="；circle"；>；<；/p>；<；/p>；<；/p>；。css3代码。CSS Code复制内容到剪贴板。

这篇文章主要为大家介绍了利用css3制作的一款鼠标经过按钮特效，当鼠标放在按钮上，按钮就会发生变化，产生一个动态效果，非常漂亮。需要的朋友可以参考下

　　今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<p align="center">
 <p class="contener">
 <p class="txt_button">
 WIFEO</p>
 <p class="circle">
 </p>
 </p>
 </p>

　　css3代码：

CSS Code复制内容到剪贴板

.contener 
{ 
 width: 300px; 
 height: 60px; 
 background-color: #00bcd4; 
 line-height: 60px; 
 color: #ffffff; 
 font-weight: 300; 
 font-family: 'Roboto'; 
 font-size: 25px; 
 position: relative; 
 overflow: hidden; 
 cursor: pointer; 
 box-shadow:1px 1px 1px #333333; 
} 
.txt_button 
{ 
 position: absolute; 
 width: 100%; 
} 
.contener:hover .circle
{ 
 -webkit-animation:oblik 0.4s ease-in; 
 -webkit-transform-origin: 50% 50%; 
 -moz-animation:oblik 0.4s ease-in; 
 -moz-transform-origin: 50% 50%; 
 -ms-animation:oblik 0.4s ease-in; 
 -ms-transform-origin: 50% 50%; 
 animation:oblik 0.4s ease-in; 
 transform-origin: 50% 50%; 
 width: 100px; 
 height: 100px; 
 border-radius: 50%; 
} 
@-webkit-keyframes oblik { 
 0% {opacity:1;-webkit-transform:scale(0);} 
 100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;} 
} 
@-moz-keyframes oblik { 
 0% {opacity:1;-moz-transform:scale(0);} 
 100% {opacity:0;-moz-transform:scale(5);background-color: #006064;} 
} 
@-ms-keyframes oblik { 
 0% {opacity:1;-ms-transform:scale(0);} 
 100% {opacity:0;-ms-transform:scale(5);background-color: #006064;} 
} 
@keyframes oblik { 
 0% {opacity:1;transform:scale(0);} 
 100% {opacity:0;transform:scale(5);background-color: #006064;} 
}

【相关推荐】

1. CSS3免费视频教程

2. 关于CSS3中选择符的实例详解

3. 关于CSS3中的content属性实例详解

4. 详解CSS3中10个顶级命令

5. 简述网页设计师怎么使用好CSS3技术

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com