CSS动画效果,css3字体动画特效

实现效果

实现代码

html

　　分区id=容器欢迎div id=flip div div JB 51/div/div div div div div欢迎访问/div/div /div /divpa css3动画演示/p

css

　　 @导入URL( https://字体。谷歌API。com/CSS？family=Roboto:700’)；body { margin:0px；font-family:“Roboto”；文本对齐：居中；} #容器{ color:# 999；文本转换：大写；字体大小：36px字体粗细：粗体；填充顶部：200像素；位置：固定；宽度：100%;垫底：45%;显示：块；} # flip { height:50px；溢出：隐藏；} # flip div div { color:# fff；填充：4px 12px高度：45像素边距-底部：45像素显示：内嵌-块；} #翻转分区：第一子{动画：展示5s线性无限；} # flip div div { background:# 42c 58a；} #翻转分区：第一子div {背景：# 4 ec7 f 3；} #翻转分区：最后一个子div {背景：# DC 143 c；} @关键帧显示{ 0% { margin-top:-270像素；} 5% { margin-top:-180 px；} 33% { margin-top:-180 px；} 38% { margin-top:-90px；} 66% { margin-top:-90px；} 71% { margin-top:0px；} 99.99% { margin-top:0px；} 100% { margin-top:-270 px；}}p位置：固定；宽度：100%;底部：30px字体大小：12px颜色：# 999;边距-顶部：200像素}以上就是简单的钢性铸铁文字动画效果的详细内容，更多关于钢性铸铁文字动画效果的资料请关注其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。