css怎样实现一直旋转动画效果

方法:1、利用“元素{animation:名称 时间 infinite}”语句给元素绑定动画;2、利用“@keyframes 名称{100%{transform:rotate(旋转角度)}}”语句设置动画的旋转动作,实现元素一直旋转效果。

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css怎样实现一直旋转动画效果

在css中,可以利用animation属性来个元素绑定动画,animation属性可以控制动画时长和次数,语法为:

animation: name duration timing-function delay iteration-count direction;

其中:

其中属性的值设置为“infinite”时,规定动画无限次播放,当我们给元素绑定旋转动画时就能够一直旋转了。

再通过@keyframes规则设置动画的旋转动作。

示例如下:

<!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>

输出结果:

(学习视频分享:css视频教程)

更多关于云服务器域名注册虚拟主机的问题,请访问西部数码官网:www.west.cn

赞(0)
声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-62778877-8306;邮箱:fanjiao@west.cn。本站原创内容未经允许不得转载,或转载时需注明出处:西部数码知识库 » css怎样实现一直旋转动画效果

登录

找回密码

注册