CSS3 Glowing Text Effect

好像没有写CSS3方面的Demo效果了，今天在邮件中看到一个有关于CSS3写的文字发光和动画的案例，觉得很有意思，也就动手一试了，真心的爽。这个效果中最关键的是使用了十个相同的标签，来模仿了一个3D立体的效果，同时设置一个抖动的效果，这个效果主要由transform的rotate3d来制作，在不同的时间段设置不同的效果，另外通过text-shadow制作了阴影颜色变化的效果。详细的看代码吧。

demodownload

HTML结构

<div class="textWrap">
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
  <h1>W3cplus</h1>
</div>

CSS CODE

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); }

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-glowing-text-effect.html