html动画完成一个环形的照片墙加背景音乐

最新推荐文章于 2024-07-27 23:01:21 发布

七上八下的爆米花

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量2.4k

点赞数 4

分类专栏： html

本文链接：https://blog.csdn.net/lanseguhui/article/details/80804688

版权

思路：大致就是让所有盒子绝对定位，然后给每一个盒子设置动画，让其盒子沿y轴方向旋转，并且向z轴移动，盒子之间的动画需要有一定的延迟时间，让所有盒子旋转到一定位置时，让其父级进行关于y轴的旋转

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>环形</title>
	<style type="text/css">
	@keyframes run1{
		from{
			transform: rotateY(0deg) translateZ(0px);
		}
		to{
			transform: rotateY(60deg) translateZ(300px);
		}
	}
		@keyframes run2{
		from{
			transform: rotateY(0deg) translateZ(0px);
		}
		to{
			transform: rotateY(120deg) translateZ(300px);
		}
	}
		@keyframes run3{
		from{
			transform: rot

最低0.47元/天解锁文章

七上八下的爆米花

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html动画完成一个环形的照片墙加背景音乐

思路：大致就是让所有盒子绝对定位，然后给每一个盒子设置动画，让其盒子沿y轴方向旋转，并且向z轴移动，盒子之间的动画需要有一定的延迟时间，让所有盒子旋转到一定位置时，让其父级进行关于y轴的旋转&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
复制链接

扫一扫

专栏目录