您的位置：首页 > Web前端 > CSS

实现html页面及css3动画

2017-11-04 10:22 274 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
body{
background-image: url("img/bg.jpg");
-webkit-background-size: cover;
background-size: cover;
}
.d1{
width:1500px;
height: 250px;
text-align: center;
}
.d2{
width:1500px;
height: 100px;
text-align: center;

}
.d3{
width:1500px;
text-align: center;
}
span{
position: relative;
}
input{
height: 40px;
border: 1px solid dodgerblue;

}
input:hover{
transform:scale(1.5);
}
.btn{
width: 150px;
height: 45px;
font-size: 16px;
border: none;
background:dodgerblue;
color: #fff;
}
.btn:hover{
transform: scale(2);
color:red;
}
.i{
position: absolute;
right: 8px;
width:30px;
height: 30px;
margin-top:10px;
}
.i:hover{
/*background: url("img/camera_on.png");*/
transform: scale(1.2);

}
ul{
width: 900px;
}
ul li{
list-style: none;
float: left;
margin:10px;
}
.ul1:hover{
transform:rotate(360deg);
transition:3s;

}
.ul2:hover{
transform:rotate(-360deg);
transition:3s;

}
.img1:hover{
-webkit-transform:rotate(360deg) ;
-moz-transform:rotate(360deg) ;
-ms-transform:rotate(360deg) ;
-o-transform:rotate(360deg) ;
transform: rotate(360deg);
transition: transform 1s;
}
.img2:hover{
-webkit-transform:rotate(-360deg) ;
-moz-transform:rotate(-360deg) ;
-ms-transform:rotate(-360deg) ;
-o-transform:rotate(-360deg) ;
transform: rotate(-360deg);
transition: transform 1s;
}
.img3:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-ms-transition: transform 1s;
-o-transition: transform 1s;
transition: transform 1s;
}
.img4:hover{
-webkit-transform: skew(50deg);
-moz-transform: skew(50deg);
-ms-transform: skew(50deg);
-o-transform: skew(50deg);
transform: skew(50deg);
}
</style>
</head>
<body>
<div>
<div class="d1"><img src="img/logo.png" /></div>
<div class="d2"><span><input type="text" size="70"/><img class="i" src="img/camera_off.png"/></span>
<button class="btn"> 百度一下</button></div>
<div class="d3">
<ul class="ul1">
<li><img src="img/top1.jpg" width="150px" height="150px" class="img1"/></li>
<li><img src="img/top2.png" width="150px" height="150px"/></li>
<li><img src="img/top3.png" width="150px" height="150px"/></li>
<li><img src="img/top4.jpg" width="150px" height="150px"/></li>
<li><img src="img/top5.jpg" width="150px" height="150px"/></li>
</ul>
<ul class="ul2">
<li><img src="img/bottom1.jpg" width="150px" height="150px" class="img2"/></li>
<li><img src="img/bottom2.jpg" width="150px" height="150px"/></li>
<li><img src="img/bottom3.jpg" width="150px" height="150px" class="img3"/></li>
<li><img src="img/bottom4.png" width="150px" height="150px"  class="img4"/></li>
<li><img src="img/bottom5.png" width="150px" height="150px"/></li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航