100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html间隔代码_HTML+CSS基础入门开发 经典Loading加载缩放动画特效

html间隔代码_HTML+CSS基础入门开发 经典Loading加载缩放动画特效

时间:2018-08-12 20:44:07

相关推荐

html间隔代码_HTML+CSS基础入门开发 经典Loading加载缩放动画特效

大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正。

效果图:

Loading加载缩放动画特效

HTML代码:

CSS代码:

知识点:

animation:是CSS3的动画属性,这里把animation绑定到tui-demo-5元素上,并指定该动画需要0.4秒完成,infinite则表示无限次播放该动画,alternate则表示动画会在奇数次数正常播放,而在偶数次数向后播放,animation-delay则表示动画在启动前的延迟间隔。

@keyframes:该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0%是动画开头,100%是动画结束。

transform:该属性应用于2D元素或3D元素的转换,允许元素发生旋转,缩放,移动,倾斜等效果。scale定义2D缩放,可以配置缩放大小。opacity定义元素的不透明级别。

最后注意下浏览器兼容问题,-webkit-,-ms-或-moz-,有问题可以留言,大家一起学习HTML+CSS基础入门开发。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。