使用CSS可以实现很多有趣的效果,比如下面这个示例,就是三张图片围绕中心点旋转。.rotate { position: relative; width: 200px; height: 200px; m
使用CSS可以实现很多有趣的效果,比如下面这个示例,就是三张图片围绕中心点旋转。
.rotate { position: relative; width: 200px; height: 200px; margin: 0 auto; } .rotate img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: rotate 10s linear infinite; } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } .rotate img:nth-child(2) { animation-delay: -5s; } .rotate img:nth-child(3) { animation-delay: -3.33s; }
首先,我们创建一个容器元素,设置其宽高并使其居中显示,子元素也就是图片设置为绝对定位,并旋转动画,其中 animation
属性指定了旋转动画的名称、持续时间和重复次数。
我们使用 transform: rotateZ
属性来实现绕着中心点的旋转效果,其中的 deg
表示旋转的角度,0和360度分别对应了图片的正面。
最后,我们单独为第二张和第三张图片设置 animation-delay
延迟属性,使它们的动画时间比第一张图片晚,从而实现了每张图片在不同的时间开始旋转。
粉丝
0
关注
0
收藏
0