CSS3 Glowing Text Effect
一个有关于CSS3写的文字发光和动画的案例。这个效果中最关键的是使用了十个相同的标签,来模仿了一个3D立体的效果,同时设置一个抖动的效果,这个效
果主要由transform的rotate3d来制作,在不同的时间段设置不同的效果,另外通过text-shadow制作了阴影颜色变化的效果。详细的
看代码吧。
HTML
CSS
演示:http://www.w3cplus.com/demo/css3/Css3GlowingText/index.html
下载:Css3GlowingText.zip
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
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
【CSS3 Glowing Text Effect】相关文章
3. CoffeeScript 已死,CoffeeScript 万岁!
4. Web Inspector:在 Sublime Text 中调试 JavaScript 代码
6. Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
9. 你未必知道的CSS小知识:text-decoration属性变成了属性简写
本文来源:https://www.51html5.com/a900.html
﹝CSS3 Glowing Text Effect﹞相关内容
- 一个跨浏览器的响应式设计辅助工具类库 - CSS Browser Selector +
- Form Follows Function:绚丽HTML5互动体验网站
- Dangersoffracking:视差滚动效果网站
- HTML.Next会给我们带来什么?
- W3C高管Cotton:10月HTML.Next将公布首个工作草案
- HTML5 区域(Sectioning)的重要性
- 脚本语言 CoffeeScript 1.9.2 发布
- 免费送书活动:《CoffeeScript应用开发》
- 关注移动Web w3ctech再次启航
- Internet Explorer 10现配备宽松模式