今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单,但效果很好,非常漂亮。一起看下效果图:
实现的代码。
html代码:
xml/html code复制内容到剪贴板
- <div align="center">
- <div class="contener">
- <div class="txt_button">
- wifeo</div>
- <div class="circle">
- </div>
- </div>
- </div>
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;}
- }
以上就是今天带给大家的一款纯css3实现的鼠标经过按钮特效,谢谢阅读,希望能帮到大家,请继续关注移动技术网,我们会努力分享更多优秀的文章。
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
CSS知识点总结
css知识点总结一、什么是CSS?二、CSS的主要作用是什么2.1 CSS布局2.1.1 盒子模型欢迎使用Ma...
[阅读全文]
-
css的基础知识
初识css1、什么是css。css是英文Cascading Style Sheet的缩写,意思是层叠样式表。作用...
[阅读全文]
-
-
CSS总结
CSS总结css基础知识CSS:层叠样式表 Cascading Style Sheet学习CSS就是学习一堆的...
[阅读全文]
-
6-css样式
背景颜色background-color背景颜色的值可以是英文,可以是十六进制颜色值,可以是rgb背景图片bac...
[阅读全文]
-
-
前端工程化的意义
工程化不是某个具体的工具,工程化的核心是对项目整体的规划和架构解决的问题&带来的价值1.每次开启新项目,...
[阅读全文]
-
-
-
-
css2zj
标签分类男标签(块标签):独占一行,eg:div hn p ul ol li dt…可以设置宽高,如果不设,则默...
[阅读全文]
网友评论