练习 2d、3d转换、图片切换

最新推荐文章于 2020-09-13 14:23:15 发布

任由天高

最新推荐文章于 2020-09-13 14:23:15 发布

阅读量506

点赞数

分类专栏： H5+CSS3 文章标签： css3

本文链接：https://blog.csdn.net/fantasy_geek/article/details/105614245

版权

H5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.bgbox{
			width: 100%;
			height: 700px;
		}
		.contain{
			width: 100%;
			height: 50%;
			position:absolute;
			top: 40%;
			padding-left: 6%;
			z-index: 9;
		}
		span{
			display: inline-block;
			position: relative;
			top: -40px;
			color: #fff;
			text-shadow: -1px -1px #000;
		}
		.one,.two,.three,.four,.five{
			width: 15%;
			height: 45%;
			border: 2px solid #fff;
			position: relative;
			top: 40%;
			float: left;
			text-align: center;
			border-radius: 5%;
			margin: 1%;
		}
		.case{
			width: 60%;
			height: 0;
			padding-bottom:60%;
			border: 4px solid #fff;
			border-radius: 50%;
			position: relative;
			top: -50px;
			display: inline-block;
			background-image: url(images/2.jpg);
		}
		ul{
			list-style: none;
		}
		.pics{
			width: 100%;
			height: 100%;
			position: relative;
		}
		.pics li{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0px;
			top: 0px;
			background-size: cover;
		}
		#pic1{
			background-image: url(images/1.jpg);
			z-index: 5;
		}
		#pic2{
			background-image: url(images/2.jpg);
			z-index: 4;
		}
		#pic3{
			background-image: url(images/3.jpg);
			z-index: 3;
		}
		#pic4{
			background-image: url(images/4.jpg);
			z-index: 2;
			perspective: 1000px;
		}
		#pic5{
			background-image: url(images/5.jpg);
			z-index: 1;
			perspective: 1000px;
		}
		.case a{
			display: inline-block;
			width: 100%;
			height: 0;
			padding-bottom:100%;
			border-radius: 50%;
			text-decoration: none;
		}
		#pic1:target{
			z-index: 5;
			animation: slideLeft 1s linear;
		}
		#pic2:target{
			z-index: 5;
			animation: slideTop 1s linear;
		}
		#pic3:target{
			z-index: 5;
			animation: scale 1s linear;
		}
		#pic4:target{
			z-index: 5;
			animation:skewTranslate 1s linear; 
		}
		#pic5:target{
			z-index: 5;
			animation:slide3d 4s linear;
		}
		@keyframes slideLeft{
			from{
				transform: translateX(-100%);
			}
			to{
				transform: translateX(0px);
			}
		}
		@keyframes slideTop{
			from{
				transform: translateY(-100%);
			}
			to{
				transform: translateY(0);
			}
		}
		@keyframes scale {
			from{
				transform: scale(0);
			}
			to{
				transform: scale(1);
			}
		}
		@keyframes skewTranslate{
			from{
				transform: rotateX(90deg);
			}
			to{
				transform: rotateX(0deg);
			}
		}
		@keyframes slide3d{
			from{
				transform: rotateY(0deg);
			}
			to{
				transform: rotateY(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="bgbox">
		<ul class="pics">
			<li id="pic1"></li>
			<li id="pic2"></li>
			<li id="pic3"></li>
			<li id="pic4"></li>
			<li id="pic5"></li>
		</ul>
		<div class="contain">
			<div class="one">
				<div class="case"><a href="#pic1"></a></div>
				<span>周一狂躁综合症</span>
			</div>
			<div class="two">
				<div class="case"><a href="#pic2"></a></div>
				<span>周二雷霆似雨浇</span>
			</div>
			<div class="three">
				<div class="case"><a href="#pic3"></a></div>
				<span>周三阴郁似乌云</span>
			</div>
			<div class="four">
				<div class="case"><a href="#pic4"></a></div>
				<span>周四冬日盼春来</span>
			</div>
			<div class="five">
				<div class="case"><a href="#pic5"></a></div>
				<span>周五守得艳阳天/span>
			</div>
		</div>
	</div>
</body>
</html>

任由天高

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
练习 2d、3d转换、图片切换

效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0;...
复制链接

扫一扫

专栏目录