html5动画

最新推荐文章于 2024-02-15 09:15:57 发布

原创最新推荐文章于 2024-02-15 09:15:57 发布 · 166 阅读

CC 4.0 BY-SA版权

本文介绍了一个周考模拟页面的设计与实现过程，重点展示了使用HTML和CSS进行页面布局的技术细节，包括响应式设计、元素定位及过渡效果等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>周考模拟</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
height: 1000px;
text-align: center;
margin: 0 auto;
margin-top: 200px;
}

li{
list-style: none;
}
ul{
width: 1100px;
height: 200px;
}
li{
width: 200px;
height: 100%;
float: left;
margin: 10px;
margin-top: 20px;
}
body{
background: url(img/body.jpg) no-repeat;
margin: 0 auto;
}
.baidu1{
width: 300px;
height: 100px;
filter:alpha(opacity:50);opacity:0.5;
}
.iv{
position: relative;
right: 20px;
top: 5px;
transition: all 2s ease;
}
.baidu{
width: 300px;
height: 30px;
transition: all 2s ease;
}
.l{
width: 100px;
height: 40px;
transition: all 2s ease;
background: dodgerblue;

}
.l:hover{
transform: scale(2);
color: red;
}

.baidu:hover{
transform: scale(1.5);
}
.iv:hover{
transform: scale(1.2);
}
.a{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.b{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.c{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.d{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.e{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.a1{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.b1{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.c1{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.d1{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.e1{
width: 180px;
height: 150px;
transition: all 2s ease;
}
.a:hover{
transform: rotate(360deg);
}
.b:hover{
transform: rotate(360deg);
}
.b1:hover{
transform: rotate(180deg);
}
.c:hover{
transform: rotate(360deg);
}
.a1:hover{
transform: rotate(-360deg);

}
.c1:hover{
transform: scale(1.5);
}
.d:hover{
transform: rotate(360deg);
}
.d1:hover{
transform: rotate(50deg);
}
.e:hover{
transform: rotate(360deg);
}
.e1:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<img src="img/bd_logo1.png" class="baidu1"/>
<div class="top">
<input type="text" class="baidu" /><img src="img/t1_03.jpg" class="iv"/>
<input type="button" value="百度一下" class="l"/>
</div>
<ul>
<li><img src="img/图片1_03.jpg" class="a" /></li>
<li><img src="img/图片1_05.jpg" class="b" /></li>
<li><img src="img/图片1_07.jpg" class="c" /></li>
<li><img src="img/图片1_09.jpg" class="d" /></li>
<li><img src="img/图片1_11.jpg" class="e" /></li>
</ul>
<ul>
<li><img src="img/图片1_18.jpg" class="a1" /></li>
<li><img src="img/图片1_19.jpg" class="b1" /></li>
<li><img src="img/图片1_20.jpg" class="c1" /></li>
<li><img src="img/图片1_21.jpg" class="d1" /></li>
<li><img src="img/图片1_22.jpg" class="e1" /></li>
</ul>
</div>
</body>
</html>