CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3 Glowing Text Effect

CSS3 Glowing Text Effect

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


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】相关文章

1. CSS3 Glowing Text Effect

2. Blast Effect(爆炸效应)

3. CoffeeScript 已死,CoffeeScript 万岁!

4. Web Inspector:在 Sublime Text 中调试 JavaScript 代码

5. Effeckt.css项目:CSS交互动画应用集锦

6. Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果

7. CSS3的文字阴影—Text-Shadow

8. 一个简单的CSS3文字动画插件textillate

9. 你未必知道的CSS小知识:text-decoration属性变成了属性简写

10. Sublime Text 包管理工具及扩展大全

本文来源:https://www.51html5.com/a900.html

点击展开全部
上一篇:CSS3 Gallery Lightbox 下一篇:Pure CSS3 Create Pagination

﹝CSS3 Glowing Text Effect﹞相关内容

「CSS3 Glowing Text Effect」相关专题

css3动画 css
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢