Fork me on GitHub

【CSS3】呼吸灯源码

节选自：腾讯 css ui lib 演示地址：http://css3lib.alloyteam.com/#animation/demo4

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" />
        <meta name="Author" content="Tencent.Jetyu" />
  
        <title>呼吸灯 BreathLight</title>
          
        <style>
            body{
                font-family:'Segoe UI Light','Segoe UI',Arial,'微软雅黑',sans-serif;
                font-size: 20px;
                color:#333333;
  
            }
            .breath {
                margin:100px auto;
                text-indent:-999em;
                height:4px;
                line-height: 4px;
                width: 50px;
                overflow:hidden;
                  
                background: #99dd33;
                color: #fff;
                opacity:0.1;
  
                -webkit-box-shadow: 0 0 5px #99dd33;
                -moz-box-shadow: 0 0 5px #99dd33;
                -ms-box-shadow: 0 0 5px #99dd33;
                -o-box-shadow: 0 0 5px #99dd33;
                box-shadow: 0 0 5px #99dd33;
                -webkit-border-radius:2px;
                -moz-border-radius:2px;
                -ms-border-radius:2px;
                -o-border-radius:2px;
                border-radius:2px;
                  
                -webkit-animation-name: breath;
                -webkit-animation-duration: 6s;     /*人的普通呼吸时间是3秒每次，深呼吸时间是6秒每次*/
                -webkit-animation-timing-function: ease-in-out;
                -webkit-animation-iteration-count: infinite;
            }
  
            @-webkit-keyframes 'breath' {
                from {
                    opacity:0.1;
                }
                50% {
                    opacity:1;
                }
                to {
                    opacity:0.1;
                }
            }
              
            @-webkit-keyframes 'breath2' {
                from {
                    opacity:0.5;
                }
                50% {
                    opacity:1;
                }
                to {
                    opacity:0.5;
                }
            }
              
            .size2{
                  
                width:100px;
                height:30px;
                line-height:25px;
                text-indent:0;
                background:orange;
                text-align:center;
                text-shadow:1px 1px 3px #333;
                  
                -webkit-box-shadow:0 0 5px orange;
                -moz-box-shadow: 0 0 5px orange;
                -ms-box-shadow: 0 0 5px orange;
                -o-box-shadow: 0 0 5px orange;
                box-shadow: 0 0 5px orange;
                  
                -webkit-animation-name: breath2;
            }
        </style>
    </head>
    <body>
        <div class="breath" title="我们一直都在与你一起力努力^_-">breath</div>
        <div class="breath size2" title="我们一直都在与你一起力努力^_-">Button</div>
    </body>   
</html>

 

posted @ 2013-05-24 16:31  _落雨  阅读(592)  评论(0)  编辑  收藏  举报