简单的css文字动画效果Vue+CSS3实现文字飞入飞出动画特效代码CSS3 文字动画效果CSS3文字图标组合悬停UI动画特效源码基于css3+svg实现的文字轮廓边框线条动画特效源码css3悬停文字交叉飘动切换动画特效CSS3实现的立体文字重叠动画特效源码js+css3实现彩色文字标签云3d立体旋转动画特效CSS3+SVG实现炫酷的霓虹灯发光文字动画特效源码jQuery基于CSS3制作的文字碎片化loading加载动画特效源码css3+animation属性制作拆分loading文字加载动画特效

 Welcome 
jb51
欢迎访问
a css3 animation demo

 @import url('https://fonts.googleapis.com/css?family=Roboto:700'); body { margin:0px; font-family:'Roboto'; text-align:center; } #container { color:#999; text-transform: uppercase; font-size:36px; font-weight:bold; padding-top:200px; position:fixed; width:100%; bottom:45%; display:block; } #flip { height:50px; overflow:hidden; } #flip > div > div { color:#fff; padding:4px 12px; height:45px; margin-bottom:45px; display:inline-block; } #flip div:first-child { animation: show 5s linear infinite; } #flip div div { background:#42c58a; } #flip div:first-child div { background:#4ec7f3; } #flip div:last-child div { background:#DC143C; } @keyframes show { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71% {margin-top:0px;} 99.99% {margin-top:0px;} 100% {margin-top:-270px;} } p { position:fixed; width:100%; bottom:30px; font-size:12px; color:#999; margin-top:200px; }