CSS是网页设计中不可或缺的一部分,它可以使网页的外观更加丰富和生动。今天,我们来学习一下如何使用CSS实现两层旋转动画。 .container { position: relative; width
CSS是网页设计中不可或缺的一部分,它可以使网页的外观更加丰富和生动。今天,我们来学习一下如何使用CSS实现两层旋转动画。
.container { position: relative; width: 200px; height: 200px; } .box1, .box2 { position: absolute; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 20px #000; } .box1 { transform: rotate(0deg); animation: spin1 2s linear infinite; } .box2 { transform: rotate(180deg); animation: spin2 2s linear infinite; } @keyframes spin1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin2 { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
以上代码中,我们先定义了一个容器并设置它的宽高和position属性。然后创建两个相同大小的div,为它们设置绝对定位,半径为50%的圆角,以及20px的边框和阴影。接下来,我们为这两个div设置不同的初始旋转角度,并通过CSS的animation属性使它们无限旋转。最后,我们定义了两个关键帧,分别控制了两个div的旋转角度。
有了这个代码,我们就可以轻松地在网页中添加两层旋转动画了。如果你想要更多的旋转层数,只需在容器中添加更多的相同样式的div,并为它们设置不同的初始旋转角度和关键帧即可。
粉丝
0
关注
0
收藏
0