旋转的立方体

最新推荐文章于 2025-12-30 10:21:10 发布

原创最新推荐文章于 2025-12-30 10:21:10 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #animation

本文深入探讨了关键帧动画（animation）与过渡（transition）在网页设计中的应用及区别。通过实例展示了如何使用CSS关键帧动画实现复杂的旋转和平移效果，并对比了animation与transition在执行方式、运动曲线、播放次数等方面的差异。

html代码

<div>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
</div>

主要用的是关键帧动画，旋转、偏移等。
关键帧动画：
Animation：动画名称动画执行时间动画的延迟执行时间动画执行次数动画的运动曲线动画第二个周期如何执行执行完成之后保留在哪个位置动画是否停止或运动
并用@keyframes 动画名称 {样式}
css样式

<style type="text/css">
*{margin: 0;height: 0;}
div{width: 400px;height: 400px;transition: 1s;margin: 50px auto;position: relative;transform-style: preserve-3d;animation: zhuan 19s infinite linear;}
p{width: 400px;height: 400px;position: absolute; overflow: hidden;transition: 1s;}
p:nth-of-type(1){background: url(img/1.jpg) repeat center;transform: translatez(200px);}
p:nth-of-type(2){background: url(img/2.jpg) repeat center;transform: translatez(-200px);}
p:nth-of-type(3){background: url(img/3.jpg) repeat center;transform: rotateX(90deg) translatez(200px);}
p:nth-of-type(4){background: url(img/4.jpg) repeat center;transform: rotatex(90deg) translatez(-200px);}
p:nth-of-type(5){background: url(img/5.jpg) repeat center;transform: rotatey(90deg) translatez(200px);}
p:nth-of-type(6){background: url(img/6.jpg) repeat center;transform: rotatey(90deg) translatez(-200px);}

@keyframes zhuan{
	to{transform: rotate3d(1,1,1,720deg);}
}
div:hover p:nth-of-type(1){transform: translatez(300px);}
div:hover p:nth-of-type(2){transform: translatez(-300px);}
div:hover p:nth-of-type(3){transform: rotateX(90deg) translatez(300px);}
div:hover p:nth-of-type(4){transform: rotateX(90deg) translatez(-300px);}
div:hover p:nth-of-type(5){transform: rotatey(90deg) translatez(300px);}
div:hover p:nth-of-type(6){transform: rotatey(90deg) translatez(-300px);}

关于关键帧动画与过度的区别，这两个都可以用来做一些动画效果，但是还有一些区别的。
两个都可以实现动画过渡效果，两者都可以设置执行时间、延迟执行时间、运动曲线，animation可以打开浏览器自动执行，transition当触发时才能执行。animation可以设置播放次数，transition的播放次数取决于触发次数，animation可以设暂停，transition不可以，animation可以设置下一个周期如何执行，执行完成之后保留在哪个状态