【Demo】CSS3 动画文字

效果图：

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @import url(http://fonts.googleapis.com/css?family=Concert+One);
            *{
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
            body{
                background: #0a0a0a;
                overflow: hidden;
                text-align: center;
                
            }
            figure{
                animation: wobble 5s ease-in-out infinite;
                -moz-animation: wobble 5s ease-in-out infinite;
                -ms-animation: wobble 5s ease-in-out infinite;
                -webkit-animation: wobble 5s ease-in-out infinite;
                transform-origin: center center;
                -moz-transform-origin: center center;
                -ms-transform-origin: center center;
                -webkit-transform-origin: center center; 
                transform-style: preserve-3d; 
                -moz-transform-style: preserve-3d; 
                -ms-transform-style: preserve-3d; 
                -webkit-transform-style: preserve-3d; 
            }
            @keyframes wobble {
              0%,100%{ 
                  transform:rotate3d(1,1,0,40deg); 
                  -moz-transform:rotate3d(1,1,0,40deg);
                  -ms-transform:rotate3d(1,1,0,40deg);
                  -webkit-transform:rotate3d(1,1,0,40deg);
              }
              25%{ 
                  transform:rotate3d(-1,1,0,40deg); 
                  -moz-transform:rotate3d(-1,1,0,40deg);
                  -ms-transform:rotate3d(-1,1,0,40deg);
                  -webkit-transform:rotate3d(-1,1,0,40deg);
              }
              50%{ 
                  transform:rotate3d(-1,-1,0,40deg); 
                  -moz-transform:rotate3d(-1,-1,0,40deg);
                  -ms-transform:rotate3d(-1,-1,0,40deg);
                  -webkit-transform:rotate3d(-1,-1,0,40deg);
                  }
              75%{ 
                  transform:rotate3d(1,-1,0,40deg); 
                  -moz-transform:rotate3d(1,-1,0,40deg);
                  -ms-transform:rotate3d(1,-1,0,40deg);
                  -webkit-transform:rotate3d(1,-1,0,40deg);
                  }
            }
            @keyframes glow{
                0%,100%{
                    text-shadow: 0 0 30px red;}
                25%{text-shadow: 0 0 30px orange;}
                50%{ text-shadow:0 0 30px forestgreen; }
                  75%{ text-shadow:0 0 30px cyan; }
            }
            h1{
                display: block;
                width: 100%;
                padding: 40px;
                color: #030303;
                line-height: 1.5;
                font: 900 8em  'Concert One', sans-serif;
                text-transform: uppercase;
                position: absolute;
                animation:glow 10s ease-in-out infinite;
                -moz-animation: glow 10s ease-in-out infinite;
                -ms-animation: glow 10s ease-in-out infinite;
                -webkit-animation: glow 10s ease-in-out infinite;
            }
            h1:nth-child(2){
                transform:translateZ(5px);
                -moz-transform:translateZ(5px);
                  -ms-transform:translateZ(5px);
                  -webkit-transform:translateZ(5px);
                }
            h1:nth-child(3){
                transform:translateZ(10px);
                -moz-transform:translateZ(10px);
                  -ms-transform:translateZ(10px);
                  -webkit-transform:translateZ(10px);
                }
            h1:nth-child(4){
                transform:translateZ(15px);
                -moz-transform:translateZ(15px);
                  -ms-transform:translateZ(15px);
                  -webkit-transform:translateZ(15px);
            }
            h1:nth-child(5){
                transform:translateZ(20px);
                -moz-transform:translateZ(20px);
                  -ms-transform:translateZ(20px);
                  -webkit-transform:translateZ(20px);
                }
            h1:nth-child(6){
                transform:translateZ(25px);
                -moz-transform:translateZ(25px);
                  -ms-transform:translateZ(25px);
                  -webkit-transform:translateZ(25px);
            }
            h1:nth-child(7){
                transform:translateZ(30px);
                -moz-transform:translateZ(30px);
                  -ms-transform:translateZ(30px);
                  -webkit-transform:translateZ(30px);
                }
            h1:nth-child(8){
                transform:translateZ(35px);
                -moz-transform:translateZ(35px);
                  -ms-transform:translateZ(35px);
                  -webkit-transform:translateZ(35px);
                }
            h1:nth-child(9){
                transform:translateZ(40px);
                -moz-transform:translateZ(40px);
                  -ms-transform:translateZ(40px);
                  -webkit-transform:translateZ(40px);
                }
            h1:nth-child(10){
                transform:translateZ(45px);
                -moz-transform:translateZ(45px);
                  -ms-transform:translateZ(45px);
                  -webkit-transform:translateZ(45px);
                }
            
            
        </style>
    </head>
    <body>
        <figure>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
            <h1>Glowing text</h1>
        </figure>
    </body>
</html>

 

posted @ 2017-09-26 17:59  名曰大神  阅读(522)  评论(0)  编辑  收藏  举报