css之呼吸灯效果

1、首先脑补一个知识点,我们在代码中经常看到-webkit或-moz,那这些有什么作用了,看下代码就知道了:

-webkit-border-radius: 2px;       /*Webkit:谷歌支持:圆角*/
-moz-border-radius: 2px;          /*Mozilla:火狐支持:圆角*/
-ms-border-radius: 2px;           /*Microsoft:IE9支持:圆角*/
-o-border-radius: 2px;            /*Opera支持:圆角*/
border-radius: 2px;               /*圆角*/


2、好了,呼吸灯的原理就是修改标签的不透明度,主要利用到css3的animation动画

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>呼吸灯</title>
    <style type="text/css">
    /* css代码 */
    </style>
</head>
<body>
    <div class="breath_light" title="呼吸线"></div>
</body>
</html>


3、css代码是这样的:

.breath_light {
        width: 50px;                                    /* 宽度 */
        height: 4px;                                    /* 高度 */
        opacity: 0.1;                                   /* 不透明度 */
        overflow: hidden;                               /* 溢出隐藏 */
        background: #99dd33;                            /* 背景色 */
        margin: 25% auto;                               /* 外边距 */
  
        /* IE10、Firefox and Opera,IE9以及更早的版本不支持 */
        animation-name: breath;                         /* 动画名称 */
        animation-duration: 3s;                         /* 动画时长3秒 */
        animation-timing-function: ease-in-out;         /* 动画速度曲线:以低速开始和结束 */
        animation-iteration-count: infinite;            /* 播放次数:无限 */
 
       /* Safari and Chrome */
        -webkit-animation-name: breath;                 /* 动画名称 */
        -webkit-animation-duration: 3s;                 /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
        -webkit-animation-iteration-count: infinite;    /* 播放次数:无限 */
    }
 
    @keyframes breath {
        from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
        50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
        to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */    
    }
 
    @-webkit-keyframes breath {
        from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
        50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
        to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
    }



css之呼吸灯效果,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。