CSS3实现的文字弹出特效纯css3发光霓虹灯文字闪烁特效代码CSS3文字图标组合悬停UI动画特效源码css3鼠标悬停图片3D翻页显示文字描述特效基于css3+svg实现的文字轮廓边框线条动画特效源码css3悬停文字交叉飘动切换动画特效CSS3实现的立体文字重叠动画特效源码CSS3+SVG实现炫酷的霓虹灯发光文字动画特效源码CSS3文字震动破碎特效源码CSS3实现的下划线跟随文字导航特效源码

https://www.jb51.net
a css3 animation demo

 @import url('https://fonts.googleapis.com/css?family=Roboto:300'); body { text-align:center; background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%); color:#555; font-family:'Roboto'; font-weight:300; font-size:32px; padding-top:40vh; height:100vh; overflow:hidden; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: translate3d(0,0,0); } div { display:inline-block; overflow:hidden; white-space:nowrap; } div:first-of-type { /* For increasing performance ID/Class should've been used. For a small demo it's okaish for now */ animation: showup 7s infinite; } div:last-of-type { width:0px; animation: reveal 7s infinite; } div:last-of-type span { margin-left:-355px; animation: slidein 7s infinite; } @keyframes showup { 0% {opacity:0;} 20% {opacity:1;} 80% {opacity:1;} 100% {opacity:0;} } @keyframes slidein { 0% { margin-left:-800px; } 20% { margin-left:-800px; } 35% { margin-left:0px; } 100% { margin-left:0px; } } @keyframes reveal { 0% {opacity:0;width:0px;} 20% {opacity:1;width:0px;} 30% {width:355px;} 80% {opacity:1;} 100% {opacity:0;width:355px;} } p { font-size:12px; color:#999; margin-top:200px; }