css练习，实现3D效果旋转幻灯片

最新推荐文章于 2021-12-28 18:19:18 发布

chaosama

最新推荐文章于 2021-12-28 18:19:18 发布

阅读量324

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/chaosama/article/details/104911103

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

比较有趣的一个css小练习，注解已经写到代码里面了，直接看就OK了

原文来自哔哩哔哩的米修在线视频教学：3D效果｜旋转幻灯片可以看一下作为知识拓展，感觉还不错

先来看效果

项目结构

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>旋转幻灯片</title>
</head>
<body>
	<div class="slider">
		<div class="slide visible">
			<img src="img/img1.jpg" alt="">
		</div>
		<div class="slide">
			<img src="img/img2.jpg" alt="">
		</div>
		<div class="slide">
			<img src="img/img3.jpg" alt="">
		</div>
		<div class="slide">
			<img src="img/img4.jpg" alt="">
		</div>
		<div class="slide">
			<img src="img/img5.jpg" alt="">
		</div>
	</div>
	<script type="text/javascript">
		const slider = document.querySelector('.slider')
		const slides = document.querySelectorAll('.slide')
		let activeSlide = 0
		function changeSlide(){
			//由于visible是管理透明度的，等同于直接操控visible就能操控显隐
			slides[activeSlide].classList.remove('visible')//清除visible并让活跃图片进入下一个
			activeSlide++
			//判断activeSlide是否超过了图片数量，是的话就归零重来
			if(activeSlide>=slides.length){
				activeSlide=0
			}
			//给下一位添加活跃
			slides[activeSlide].classList.add('visible')
		}
		// 添加监听事件,每2000毫秒执行一次changeSlide的改变活跃图片函数
		slider.addEventListener("animationstart",()=>{
			setInterval(changeSlide,2000)
		})
	</script>
</body>
</html>

style.css

*{
	box-sizing:border-box
}
body{
	background-color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	perspective: 1000px;/*这个值可以让3d效果更加立体化*/
}
.slider{
	/* 这里需要让所有图片显示在一个slider里面,所以相对定位,slide则是绝对定位,否则会重叠 */
	position: relative;
	width: 500px;
	height: 500px;
	transform-style: preserve-3d;/*transform-style: flat|preserve-3d;在2d显示还是3d*/
	animation: rotate 4s linear infinite;
	/*animation实际上是animation-name,animation-duration,animation-timing-function,animation-delay,
	animation-iteration-count,animation-direction的简写,可以分别搜一下这几个
	语法:animation: name duration timing-function delay iteration-count direction;*/
}
@keyframes rotate{
	0%{
		transform: rotateY(80deg);
	}
	50%{
		transform: rotateY(260deg);
	}
	100%{
		transform: rotateY(440deg);
	}
}


.slide{
	opacity: 0;/*透明,由于最后一个叠在上面,想显示第一张先就需要先透明隐藏*/
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
.slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide.visible{/*需要显示的则赋值*/
	opacity: 1;
}

/* 媒体编辑器 */
@media (max-width:500px){
	.slider{
		width: 280px;
		height: 280px;
	}
}