【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>

 

你可能感兴趣的:(css3)