效果图：
完整代码：
<!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>【Demo】CSS3 动画文字
原文地址：http://www.cnblogs.com/lymblog/p/7598099.html