标签：child idt 动画 mes key ext charset red code
效果图：
完整代码：
<!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>
标签：child idt 动画 mes key ext charset red code
原文地址：http://www.cnblogs.com/lymblog/p/7598099.html
