脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

一款纯css3实现的鼠标经过按钮特效教程

  发布时间：2014-11-09 15:36:12   作者：佚名   我要评论
这篇文章主要为大家介绍了利用css3制作的一款鼠标经过按钮特效，当鼠标放在按钮上，按钮就会发生变化，产生一个动态效果，非常漂亮。需要的朋友可以参考下

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div align="center">  
  2.        <div class="contener">  
  3.            <div class="txt_button">  
  4.                WIFEO</div>  
  5.            <div class="circle">  
  6.                 </div>  
  7.        </div>  
  8.    </div>  

　　css3代码：

CSS Code复制内容到剪贴板
  1. .contener   
  2. {   
  3.   width: 300px;   
  4.   height: 60px;   
  5.   background-color: #00bcd4;   
  6.   line-height: 60px;   
  7.   color: #ffffff;   
  8.   font-weight: 300;   
  9.   font-family: 'Roboto';   
  10.   font-size: 25px;   
  11.   position: relative;   
  12.   overflow: hidden;   
  13.   cursor: pointer;   
  14.   box-shadow:1px 1px 1px #333333;   
  15. }   
  16. .txt_button   
  17. {   
  18.   position: absolute;   
  19.   width: 100%;   
  20. }   
  21. .contener:hover .circle  
  22. {   
  23.   -webkit-animation:oblik 0.4s ease-in;   
  24.   -webkit-transform-origin: 50% 50%;   
  25.   -moz-animation:oblik 0.4s ease-in;   
  26.   -moz-transform-origin: 50% 50%;   
  27.   -ms-animation:oblik 0.4s ease-in;   
  28.   -ms-transform-origin: 50% 50%;   
  29.   animation:oblik 0.4s ease-in;   
  30.   transform-origin: 50% 50%;   
  31.   width: 100px;   
  32.   height: 100px;   
  33.   border-radius: 50%;    
  34. }   
  35. @-webkit-keyframes oblik {   
  36.   0% {opacity:1;-webkit-transform:scale(0);}   
  37.   100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;}      
  38. }   
  39. @-moz-keyframes oblik {   
  40.   0% {opacity:1;-moz-transform:scale(0);}   
  41.   100% {opacity:0;-moz-transform:scale(5);background-color: #006064;}      
  42. }   
  43. @-ms-keyframes oblik {   
  44.   0% {opacity:1;-ms-transform:scale(0);}   
  45.   100% {opacity:0;-ms-transform:scale(5);background-color: #006064;}      
  46. }   
  47. @keyframes oblik {   
  48.   0% {opacity:1;transform:scale(0);}   
  49.   100% {opacity:0;transform:scale(5);background-color: #006064;}      
  50. }  

　　以上就是今天带给大家的一款纯css3实现的鼠标经过按钮特效，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

相关文章

  • CSS3中的@media查询常见问题

    CSS3的@media查询功能允许我们根据不同的媒体类型和设备特性来应用不同的样式规则,,本文详细探讨了@media查询的定义、语法、使用场景及注意事项,旨在帮助开发者更好地理解
    2024-10-17

  • CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现

    CSS3的border-radius属性可以轻松制作圆角效果,支持一至四个值来分别定义四个角的圆角大小,一个值时所有角圆角相同,两个值时对角线上的角相同,本文给大家介绍CSS3 新特性 b
    2024-10-17

  • 如何保持CSS3动画结束状态不变

    CSS3动画为网页设计带来了丰富的动态效果，使得页面更加生动和吸引人,然而，有时我们希望动画在结束时保持最终状态，而不是回到初始状态,本文将介绍几种方法来实现这一效果
    2024-10-15

  • CSS3 伪元素与伪类选择器区别与应用实例详解

    伪元素和伪类都增强了CSS选择器的功能,但它们有明显的区别,伪元素通过::表示,如::before和::after,用于向元素添加或修改内容,伪类则通过:表示,如:hover和:first-child,用于
    2024-10-15

  • 如何使用CSS3进行样式效果增强

    本文介绍了使用CSS3实现各种样式效果的方法,包括文字渐变、圆角、阴影、多重背景等,通过实例代码,展示了如何简洁有效地增强网页视觉效果,无需额外图像或复杂脚本,适合前端
    2024-09-13

  • css3实现动态滚动播放列表功能

    在Web开发中，动态滚动播放列表能够提升用户体验，使内容展示更加生动有趣,本文介绍了如何仅使用CSS3实现一个基础的循环播放列表，其中关键技术包括@keyframes规则和animat
    2024-09-11

  • CSS3动画实现多个跳动小球效果(语音输入动画)

    之前有做过一个需求，安卓端嵌H5页面，实现语音输入并包含输入时动画，跳动的小球，多个小球同时跳动，相对定位需要left不相同，其次每个小球动画开始有时间差，其次就是小
    2024-08-29

  • 详解CSS3 边框样式(包含border-radius、border-image与box-shadow)

    这篇文章主要介绍了CSS3 边框样式(包含border-radius、border-image与box-shadow)的相关知识，本文给大家介绍的非常详细，,需要的朋友可以参考下
    2024-08-29

  • css3 使用box-shadow实现浮雕风格按钮效果

    这篇文章主要介绍了css3 使用box-shadow实现浮雕风格按钮效果，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
    2024-08-19

  • 一文了解CSS3 新增背景属性 + 新增边框属性

    CSS3在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题，本篇文章主要讲解的为CSS3新增背景属性和新增边框属性，感兴趣的朋友一起看看吧
    2024-08-14

最新评论

关注微信公众号

扫一扫