加入收藏 | 设为首页 | 会员中心 | 我要投稿 东莞站长网 (https://www.0769zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

利用CSS3怎样做放大旋转动画,方法是什么?

发布时间:2022-04-11 17:23:14 所属栏目:语言 来源:互联网
导读:利用CSS3如何做放大旋转动画?我们知道CSS3中animation属性能实现动画效果,这篇就给大家来讲讲,实现简单的旋转并且放大效果的方法,对大家学习和理解animation属性的使用会有帮助,文中示例介绍的很详细,感兴趣的朋友可以了解看看,下面让我们一起来学习一
    利用CSS3如何做放大旋转动画?我们知道CSS3中animation属性能实现动画效果,这篇就给大家来讲讲,实现简单的旋转并且放大效果的方法,对大家学习和理解animation属性的使用会有帮助,文中示例介绍的很详细,感兴趣的朋友可以了解看看,下面让我们一起来学习一下吧!
 
    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
 
    css3实现放大旋转动画效果
 
    在html中,可以利用animation属性和“@keyframes”创建一个元素放大旋转的动画。动画中使用width和height属性控制元素放大;transform:rotate()控制元素旋转。
 
    实现代码:

width: 50px;
height: 50px;
background: red;
margin: 100px;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}
 
@keyframes mymove {
50% {
width: 150px;
height: 150px;
transform: rotate(360deg)。

(编辑:东莞站长网)

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

    热点阅读