脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > 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媒体查询简介与使用方法示例详解

    CSS3媒体查询是一种用于根据设备的特性和特定条件来应用不同样式的CSS技术，媒体查询使用@media规则来定义，本文给大家介绍CSS3媒体查询简介与使用方法，感兴趣的朋友一起
    2024-06-14

  • CSS3的常用样式属性和用法案例详解

    CSS是一种强大的样式表语言，可以为网页添加各种各样的样式和效果,而CSS3作为CSS的第三个版本，引入了许多新的样式属性和用法，为我们提供了更多创意和自由度,本文将介绍一
    2024-06-11

  • CSS3 max/min-content及fit-content、fill-available值的案例详解

    在CSS3中对width的值多了几个值：fill-available,max-content,min-content, 以及fit-content，本文通过案例讲解CSS3 max/min-content及fit-content、fill-available值的相
    2024-06-11

  • CSS3 grid 布局的简单使用示例详解

    这篇文章主要介绍了CSS3 grid 布局的简单使用示例详解,可以选择使用 absolute 绝对定位为这些块元素定位，也可以使用多个盒子嵌套来实现,结合实例代码给大家介绍的非常详细
    2024-06-04

  • CSS3媒体查询与页面自适应示例详解

    媒体查询可以根据设备特性，如屏幕宽度、高度、设备方向（横向或纵向），为设备定义独立的CSS样式表，这篇文章主要介绍了CSS3媒体查询与页面自适应,需要的朋友可以参考下
    2024-05-29

  • ElementUl 中时间线Timeline 的样式优化方案

    这篇文章主要介绍了ElementUl 中时间线Timeline 的样式优化方案,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2024-05-29

  • css3中的var()函数详解

    在CSS3中，var()函数是一个用于插入CSS自定义属性（也称为CSS变量）的值的函数,它允许你在样式表中定义可重用的值，并在多个地方引用它们，从而使你的CSS更加灵活和可维护
    2024-05-21

  • echarts图表鼠标悬停时图例错位的解决方案

    当页面body拥有zoom属性之后，鼠标划过echarts图表时，触发位置就不正常，这篇文章主要介绍了echarts图表鼠标悬停时图例错位的解决方案,需要的朋友可以参考下
    2024-05-15

  • CSS user-select 属性(是否允许用户选中文本)

    user-select属性是css3规范中新增的一个功能，用于设置或检索是否允许用户选中文本，使用语法是“user-select:none |text| all | element”，其默认值是text，并且适用于除
    2024-05-05

  • css3实现四周线条环绕流动效果

    本文主要介绍了css3实现四周线条环绕流动效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2024-02-21

最新评论

关注微信公众号

扫一扫