【前端小实战】旋转木马效果

使用 CSS 动画制作一个酷炫的旋转木马页面效果

Fetters04

1102人浏览 · 2023-01-22 10:45:02

Fetters04 · 2023-01-22 10:45:02 发布

文章目录

一、效果展示
二、完整代码

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				/* 视距,看起来有3D感 */
				perspective: 1000px;	
				background: url("img/rotate_bg.png") no-repeat;
				
				/* 调整背景尺寸为视宽,视高 */
				background-size: 100vw 100vh;
			}
			
			.box {
				position: relative;
				width: 210px;
				height: 300px;
				margin: 280px auto;
				
				/* 子元素保留3D位置 */
				transform-style: preserve-3d;
				
				/* 动画名称,持续时间,匀速,无限运行 */
				animation: myrotate 25s linear infinite;
			}
			
			/* 鼠标放图片上就暂停动画 */
			.box:hover {
				animation-play-state: paused;
			}
			
			/* 沿 Y 轴旋转从0度到360度 */
			@keyframes myrotate {
				from {
					transform: rotateY(0deg);
				}
				
				to {
					transform: rotateY(360deg);
				}
			}
			
			.item {
				width: 210px;
				height: 300px;
				position: absolute;
				/* 元素居中 */
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				cursor: pointer;	/* 放在元素上鼠标显示小手 */
				animation-play-state: paused;
				
				/* 倒影效果, below 是在图片下方, 元素和倒影的距离 15px 
				   设置了一个渐变由下到上，由背景透明色过渡到设置了不透明度的白色*/
				-webkit-box-reflect: below 15px 
				-webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.3))
			}
			
			.item img {
				height: 100%;
				width: 100%;
			}
			
			.item1 {
				transform: translateZ(400px);
			}
			
			.item2 {
				transform: rotateY(40deg) translateZ(400px);
			}
			
			.item3 {
				transform: rotateY(80deg) translateZ(400px);
			}
			
			.item4 {
				transform: rotateY(120deg) translateZ(400px);
			}
			
			.item5 {
				transform: rotateY(160deg) translateZ(400px);
			}
			
			.item6 {
				transform: rotateY(200deg) translateZ(400px);
			}
			
			.item7 {
				transform: rotateY(240deg) translateZ(400px);
			}
			
			.item8 {
				transform: rotateY(280deg) translateZ(400px);
			}
			
			.item9 {
				transform: rotateY(320deg) translateZ(400px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item item1">
				<img src="./img/rotate_item1.png"/>
			</div>
			
			<div class="item item2">
				<img src="./img/rotate_item2.png"/>
			</div>
			
			<div class="item item3">
				<img src="./img/rotate_item3.png"/>
			</div>
			
			<div class="item item4">
				<img src="./img/rotate_item4.png"/>
			</div>
			<div class="item item5">
				<img src="./img/rotate_item5.png"/>
			</div>
			<div class="item item6">
				<img src="./img/rotate_item6.png"/>
			</div>
			<div class="item item7">
				<img src="./img/rotate_item7.png"/>
			</div>
			<div class="item item8">
				<img src="./img/rotate_item8.png"/>
			</div>
			<div class="item item9">
				<img src="./img/rotate_item9.png"/>
			</div>
		</div>
	</body>
</html>