CSS3中keyframes属性有何用,用法是什么?
Admin 2022-02-07 群英技术资�
这篇文章给大家分享的是CSS3中keyframes属性的作用和使用,keyframes用于规定元素的动画动作,文中的示例代码介绍得很详细,具有一定的参考价值,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑�
css3中keyframes的用法是什�
此属性与animation属性是密切相关的�
keyframes翻译成中文,�"关键�"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题�
使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些�
语法结构:
@keyframes animationname {keyframes-selector {css-styles;}}
参数解析:
animationname:声明动画的名称�
keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使� "from" � "to"的形式�"from" � "to"的形式等价于 0% � 100%。建议始终使用百分比形式�
示例如下�
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite; } @keyframes fadenum{ 100%{transform:rotate(360deg);} } </style> </head> <body> <div></div> </body> </html>
输出结果�
现在大家对于CSS3中keyframes属性的作用和使用这些应该都有所了解了吧,希望大家阅读完这篇文章能有所收获。最后,想要了解更多,大家可以关�群英网络其它相关文章�
文本转载自PHP中文�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了Html5通过数据流方式播放视频的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
效果预览思路将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项问题点1.用什么方式实现无限轮播。这个问题就是列表滚动到最后时底部会留�(有多余空�)如何处理�
我们在做前端网页开发的时候,往往会用到圆角效果。实现圆角的方式有很多,这篇文章就主要介绍用Sprites技术来实现圆角效果。感兴趣的朋友就继续往下看吧�
这篇文章主要介绍了html父子页面iframe双向发消息的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
css怎样隐藏行元�1、在css中我们可以通过将display属性设置为none,实现元素隐藏的效果。想要隐藏行元素,只需要给这个行元素添加一个“display:none”样式即可。下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078