超好看的动画墙,点击可以切换

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			font-family: Arial, "Microsoft YaHei UI Light";
		}

		/*一、24格处理*/
		#iconWall{
			width: 732px;
			background-color: #f0f0f0;
			margin: 0 auto;
			overflow: hidden;
			padding-top: 1px;
			padding-left: 1px;
			list-style: none;
		}

		#iconWall li{
			width: 121px;
			height: 108px;
			/*background-color: #fff;*/
			float: left;
			margin-right: 1px;
			margin-bottom: 1px;
			position: relative;

		}

		/*二、3D反转区域处理 */
		.img-back, .img-front{
			position: absolute;
			left: 0;
			top: 0;
			background-color: #fff;
			width: 121px;
			height: 108px;
			text-align: center;
			line-height: 108px;
		}

		li img{
			vertical-align: middle;
		}


		.img-3d{
			transform-style: preserve-3d;
		}

		.img-back{
			transform: rotateY(180deg);
		}

		/*测试代码*/
		/*li:hover .img-3d{*/
		/*transition: .3s linear;*/
		/*transform: rotateY(180deg);*/
		/*}*/

		/*三、换一批*/
		#btnRefresh{
			text-align: center;
			transition: .3s linear;
			background-color: #fff;
		}
		.iconRefresh{
			width: 28px;
			height: 28px;
			background: url("../img/refresh.png");
			margin: 32px auto 0;
		}
		#btnRefresh:hover{
			color: #fff;
			background-color: #dd2727;
			transition: 0s;
		}
		#btnRefresh:hover .iconRefresh{
			background: url("../img/refresh-white.png");
		}


		/*四、处理浮层*/
		.mask{
			position: absolute;
			left: 0;
			top: 0;
			width: 121px;
			height: 108px;
			background-color: rgba(0, 0, 0, .7);
			opacity: 0;
		}

		.mask img{
			float: right;
			margin-top: 8px;
			margin-right: 8px;
		}
		.mask p{
			font-size: 12px;
			color: #fff;
			margin-top: 45px;
			text-align: center;
		}
		.mask a{
			color: #fff;
			text-decoration: none;
			font-size: 12px;
			background-color: red;
			width: 70px;
			display: block;
			margin: 0 auto;
			text-align: center;
			height: 18px;
			line-height: 18px;
			border-radius: 9px;
		}

		li:hover .mask{
			opacity: 1;
			transition: .3s linear;
		}

		/*页脚*/
		footer{
			text-align: center;
			margin-top: 20px;
			color: #666;
			font-size: 16px;
			line-height: 1.4;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<div class="htmleaf-content">
			<ul id="iconWall">
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon1.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon11.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon2.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon12.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon3.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon13.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon4.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon14.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon5.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon15.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon6.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon16.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon7.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon17.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon8.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon18.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon9.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon19.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon10.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon20.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon21.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon31.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon22.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon32.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon23.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon33.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon24.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon34.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon25.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon35.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon26.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon36.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon27.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon37.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon28.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon38.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon29.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon39.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon30.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon41.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon42.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon43.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon44.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon45.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li>
			        <div class="img-3d">
			            <div class="img-back">
			                <img src="img/icon22.jpg" alt="">
			            </div>
			            <div class="img-front">
			                <img src="img/icon13.jpg" alt="">
			            </div>
			        </div>
			        <div class="mask">
			            <img src="img/heart.png" alt="">
			            <p>关注人数 323.4万</p>
			            <a href="javascript:">点击进入</a>
			        </div>
			    </li>
			    <li id="btnRefresh">
			        <div class="iconRefresh"></div>
			        <span>换一批</span>
			    </li>
			</ul>
		</div>

	</div>
	<script type="text/javascript">
		window.onload = function () {
			var clickTimes = 1;

			//总列数
			var lineCount = 6;

			var btnRefresh = document.querySelector("#btnRefresh");
			var iconRefresh = document.querySelector(".iconRefresh")

			var img3DList = document.querySelectorAll(".img-3d");
			var len = img3DList.length;

			btnRefresh.onclick = function () {
			    iconRefresh.style.transition = ".3s linear";
			    iconRefresh.style.transform = "rotate("+360*clickTimes+"deg)";

			    for (var i = 0; i< len; i++){

			      var colNum = parseInt(i/lineCount);
			      var rowNum = i%lineCount;
			      var delayTime = (colNum+rowNum)*100;


			        img3DList[i].style.transition = ".3s "+delayTime+"ms linear";
			        img3DList[i].style.transform = "rotateY("+180*clickTimes+"deg)";
			     }

			    clickTimes++;
			}
		}
	</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 超好看的动画墙,点击可以切换

赞 (1)
分享到:更多 ()

发表评论 0