仅使用HTML+CSS制作一个动态旋转相册

最新推荐文章于 2023-12-26 07:11:41 发布

lhhllh.

最新推荐文章于 2023-12-26 07:11:41 发布

阅读量1.4k

点赞数 5

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_44488145/article/details/109061271

版权

仅使用HTML+CSS制作一个动态旋转相册.

1.软件使用HBuilder X

2.使用了CSS3动画

其动态效果如下：

在这里插入图片描述

其代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="lhhllh." />
		<title>猫咪</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			html,body {
				width: 100%;
				height: 100%;
			}
			body {
				perspective: 1000px;
				background-color: #111111;
			}
			.clearFix::after {
				display: block;
				visibility: hidden;
				content: '';
				height: 0;
				clear: both;
			}
			.picture {
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
			}
			
			@keyframes mask{
				0%{
					transform:   rotateX(10deg)rotateY(0deg) rotateZ(10deg);
				}
				100%{
					transform:   rotateX(0deg)rotateY(36000deg) rotateZ(0deg);
				}
			}

			.picture .picture_omg {
				position: absolute;
				top: 0;
				transform-style: preserve-3d;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 120px;
				animation: mask 800s linear;
				animation-iteration-count: infinite;
				transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
			}
			
			.picture .picture_omg>div {
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.picture_omg>div>img {
				width: 100%;
				height: 100%;
				-webkit-box-reflect: below 20px  -webkit-linear-gradient(top, rgba(255,0,0,0),rgba(255,0,0,005));
			}
			.picture_omg>div:nth-child(1) {
				width: 100%;
				height: 100%;
				background-color: pink;
				transform: translateZ(200px)
			}
			.picture_omg>div:nth-child(2) {
				width: 100%;
				height: 100%;
				transform: rotateY(40deg) translateZ(200px);
			}
			.picture_omg>div:nth-child(3) {
				width: 100%;
				height: 100%;
				transform: rotateY(80deg) translateZ(200px);
			}
			.picture_omg>div:nth-child(4) {
				width: 100%;
				height: 100%;
				transform: rotateY(120deg) translateZ(200px);
			}
			.picture_omg>div:nth-child(5) {
				width: 100%;
				height: 100%;
				transform: rotateY(160deg) translateZ(200px);
			}
			.picture_omg>div:nth-child(6) {
				width: 100%;
				height: 100%;
				transform: rotateY(200deg) translateZ(200px);
			}
			.picture_omg>div:nth-child(7) {
				width: 100%;
				height: 100%;
				transform: rotateY(240deg) translateZ(200px);
			}
			.picture_omg>div:nth-child(8) {
				width: 100%;
				height: 100%;
				transform: rotateY(280deg) translateZ(200px);
			}
			.picture_omg>div:nth-child(9) {
				width: 100%;
				height: 100%;
				transform: rotateY(320deg) translateZ(200px);
			}
		</style>
		
		
	</head>
	<body>
		<div class="picture">
			<div class="picture_omg">
				<div><img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2247692397,1189743173&fm=5" ></div>
				<div><img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1569462993,172008204&fm=5" alt=""></div>
				<div><img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1853832225,307688784&fm=5" alt=""></div>
				<div><img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406161785,701397900&fm=5" alt=""></div>
				<div><img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2244238741,1217077712&fm=5" alt=""></div>
				<div><img src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1917461690,696184102&fm=5" alt=""></div>
				<div><img src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1855682282,311511202&fm=5" alt=""></div>
				<div><img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=844520770,13398226&fm=5" alt=""></div>
				<div><img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1960441383,725046446&fm=5" alt=""></div>
			</div>
		</div>
		
		
	</body>
</html>