加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

CSS的动画旋转时间怎样控制,方法是什么?

发布时间:2022-04-11 16:59:35 所属栏目:语言 来源:互联网
导读:CSS的动画旋转时间如何控制?我们知道在CSS中,可以实现很多酷炫的动画效果,其中对于选中的效果大家应该不陌生,这篇我们就来介绍一下如何实现控制元素动画效果选中时间的方法,实现代码如下,感兴趣的朋友可以参考。 本教程操作环境:windows10系统、CSS3H
    CSS的动画旋转时间如何控制?我们知道在CSS中,可以实现很多酷炫的动画效果,其中对于选中的效果大家应该不陌生,这篇我们就来介绍一下如何实现控制元素动画效果选中时间的方法,实现代码如下,感兴趣的朋友可以参考。
 
    本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
 
    css3怎样控制旋转时间
 
    在css中,可以利用animation属性给元素绑定动画效果,利用“@keyframes”规则给元素规定动画动作。
 
    利用animation-duration 属性定义动画完成一个周期所需要的时间,以秒或毫秒计。
 
    示例如下:
 
        .div1{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum;
            animation-duration:10s;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}

(编辑:PHP编程网 - 黄冈站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读