h5动画墙制作 web前端开发
摘要：h5页面前端开发|怎么做前端app开发|开发app注重前端吗？ html 代码 <!DOCTYPE html> <html lang=”zh”> <head> <meta charset=”UTF-8″> <title>we……
h5页面前端开发|怎么做前端app开发|开发app注重前端吗？
html 代码
<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″>
<title>web前端开发实战书籍:动画墙</title>
<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>
学习前端开发入门书籍|前端开发干什么？|app前端开发怎么写？
» 本文来自：前端开发者 » 《h5动画墙制作 web前端开发》
» 本文链接地址：https://www.rokub.com/4203.html
» 您也可以订阅本站：https://www.rokub.com
近期评论