XDM，七夕快到啦？程序员的浪漫来了——一个旋转相册

最新推荐文章于 2024-01-10 09:54:52 发布

eternity_w

最新推荐文章于 2024-01-10 09:54:52 发布

阅读量185

点赞数 1

分类专栏：趣味网页文章标签： html5 css css3

本文链接：https://blog.csdn.net/eternity_w/article/details/119647462

版权

趣味网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

兄弟们，七夕快到了，趁着送礼物的时候，可以给你们的女朋友一个惊喜哦！

在这里插入图片描述
这是样式效果图有兴趣的小伙伴赶紧试试吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				perspective: 2000px;
				animation: viewIn 3s;
			}
			/* 自定义动画 */
			@keyframes viewIn{
				0%{
					perspective: 80px;
				}
				100%{
					perspective: 3000px;
				}
			}
			.item {
				/* 盒子的高度宽度是由照片的大小决定的  要依据照片修改 */
				width: 310px;
				height: 468px;
				padding: 0;
				list-style: none;
				margin: 200px auto;
				transform-style: preserve-3d;
				animation: round 10s 3s linear infinite;
			}
			
			.item:hover {
				animation-play-state: paused;
			}
			/* 自定义动画 */
			@keyframes round {
				from {
					transform:  rotateY(0);
				}
			
				to {
					transform:  rotateY(360deg);
				}
			}
			.item li{
				/* 盒子的高度宽度是由照片的大小决定的  要依据照片修改 */
				position: absolute;
				width: 310px;
				height: 468px;
				transition: all 0.7s;
			}
			.item li:nth-child(1) {
				transform: translateZ(400px);
			}
			
			.item:hover li:nth-child(1) {
				transform: translateZ(450px);
			}
			
			.item li:nth-child(2) {
				transform: rotateY(60deg) translateZ(400px);
			}
			
			.item:hover li:nth-child(2) {
				transform: rotateY(60deg) translateZ(450px);
			}
			
			.item li:nth-child(3) {
				transform: rotateY(-60deg) translateZ(400px);
			}
			
			.item:hover li:nth-child(3) {
				transform: rotateY(-60deg) translateZ(450px);
			}
			
			.item li:nth-child(4) {
				transform: translateZ(-400px);
			}
			
			.item:hover li:nth-child(4) {
				transform: translateZ(-450px);
			}
			
			.item li:nth-child(5) {
				transform: rotateY(120deg) translateZ(400px);
			}
			
			.item:hover li:nth-child(5) {
				transform: rotateY(120deg) translateZ(450px);
			}
			
			.item li:nth-child(6) {
				transform: rotateY(-120deg) translateZ(400px);
			}
			
			.item:hover li:nth-child(6) {
				transform: rotateY(-120deg) translateZ(450px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="item">
				<!-- 以下引入的图片可以换成你喜欢的  但是要记住照片的大小要一致  一定要注意  要不然 不是很美观的呦-->
				<li><img src="img/1420106192-4288.jpg" ></li>
				<li><img src="img/1420190202-5723.jpg" ></li>
				<li><img src="img/1451114694-789.jpg" ></li>
				<li><img src="img/1461140260-9872.jpg" ></li>
				<li><img src="img/1461581683-493.jpg" ></li>
				<li><img src="img/1461583123-3684.jpg" ></li>
			</ul>
		</div>
	</body>
</html>

eternity_w

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
XDM，七夕快到啦？程序员的浪漫来了——一个旋转相册

兄弟们，七夕快到了，趁着送礼物的时候，可以给你们的女朋友一个惊喜哦！这是样式效果图有兴趣的小伙伴赶紧试试吧！<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ perspective: 2000px; animation: view
复制链接

扫一扫