[CSS3技术]CSS3 Glowing Text Effect

[tr][td]一个有关于CSS3写的文字发光和动画的案例。这个效果中最关键的是使用了十个相同的标签，来模仿了一个3D立体的效果，同时设置一个抖动的效果，这个效
果主要由transform的rotate3d来制作，在不同的时间段设置不同的效果，另外通过text-shadow制作了阴影颜色变化的效果。详细的
看代码吧。



HTML

 W3cplus


 W3cplus


 W3cplus


 W3cplus


 W3cplus


 W3cplus


 W3cplus


 W3cplus


 W3cplus


 W3cplus

CSS

body {
 background: #0a0a0a;
 text-align: center;
}
.demo {
 width: 960px;
 margin: 100px auto;
 position: relative;
}
.demo * {
 box-sizing: border-box;
}
.textWrap {
 animation:wobble 5s ease-in-out infinite;
 transform-origin:center center;
 transform-style:preserve-3d;
 width: 500px;
 margin: 0 auto;
}

@keyframes wobble {
 0%,100%{ transform:rotate3d(2,3,1,60deg); }
 25%{ transform:rotate3d(-2,3,1,60deg); }
 50%{ transform:rotate3d(-2,-3,1,60deg); }
 75%{ transform:rotate3d(2,-3,1,60deg); }
}

.textWrap h1 {
 display:block;
 width:100%;
 padding:40px;
 line-height:1.5;
 font:900 9em 'Concert One', sans-serif;
 text-transform:uppercase;
 position:absolute;
 color:#f6e6e6;
 animation:glow 10s ease-in-out infinite;
}

@keyframes glow {
 0%,100%{ text-shadow:0 0 35px #e22222; }
 25%{ text-shadow:0 0 35px #10145e; }
 50%{ text-shadow:0 0 35px #a9e56e; }
 75%{ text-shadow:0 0 35px #dd16da; }
}

.textWrap h1:nth-child(2){ transform:translateZ(5px); }
.textWrap h1:nth-child(3){ transform:translateZ(10px);}
.textWrap h1:nth-child(4){ transform:translateZ(15px); }
.textWrap h1:nth-child(5){ transform:translateZ(20px); }
.textWrap h1:nth-child(6){ transform:translateZ(25px); }
.textWrap h1:nth-child(7){ transform:translateZ(30px); }
.textWrap h1:nth-child(8){ transform:translateZ(35px); }
.textWrap h1:nth-child(9){ transform:translateZ(40px); }
.textWrap h1:nth-child(10){ transform:translateZ(45px); }

演示：http://www.w3cplus.com/demo/css3/Css3GlowingText/index.html

下载：Css3GlowingText.zip




[/td][/tr]