旋转相册--个人感觉比较好看

最新推荐文章于 2024-08-16 19:04:45 发布

eternity_w

最新推荐文章于 2024-08-16 19:04:45 发布

阅读量126

点赞数

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

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

版权

趣味网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用css写一个旋转相册

<!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>

tips：适合情人节纪念日生日等重要节日时，应该会派上用场 0.0

eternity_w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转相册--个人感觉比较好看

用css写一个旋转相册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ perspective: 2000px; animatio...
复制链接

扫一扫

专栏目录