1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ彩贝高级搜索</title>
<style>
div{
border: 1px solid;
width: 300px;
margin: 0px auto;
transition: height 4s ease-in-out;
}
h2{
margin: 10px;
padding: 10px;
border-bottom: 5px solid red;
}
#i1{
padding: 6px;
font-size: 18px;
margin: 15px;
width: 270px;
border:#A9A9A9 1px solid;
color: #A9A9A9;
}
#i2{
font-size: 18px;
width: 100px;
position: relative;
left: 100px;
border:#DDDDDD 2px solid;
background:#CCCCCC ;
border-right:#898989 2px solid;
border-bottom: #898989 2px solid;
}
li{
list-style: none;
float: left;
padding: 20px;
width: 80px;
}
option{
width: 40px;
}
ul li select{
font-size: 16px;
}
li{
opacity: 0;
filter: alpha(opacity=0);
}
div:hover{
height: 450px;
}
div:hover li{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div>
<h2>高级搜索</h2>
<form method="post" action="">
<input id="i1" type="search" placeholder="请输入关键字">
<input id="i2" type="button" value="搜索">
<ul>
<li><select><option>唱歌</option></select></li>
<li><select><option>性别</option></select></li>
<li><select><option>风格</option></select></li>
<li><select><option>色系</option></select></li>
<li><select><option>价格</option></select></li>
<li><select><option>年龄</option></select></li>
<li><select><option>季节</option></select></li>
</ul>
</form>
</div>
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div img{
padding: 12px;
position:fixed;
right: 0px;
background: black;
border-radius: 5px;
z-index: 1;
}
div img:nth-of-type(1){
top: 250px;
}
div img:nth-of-type(2){
top: 300px;
}
div img:nth-of-type(3){
top: 350px;
}
div img:nth-of-type(4){
top: 400px;
}
span{
color: white;
padding: 10px;
position:fixed;
right: 0px;
background: #C84D49;
border-radius: 5px;
width: 100px;
opacity: 0;
filter: alpha(opacity=0);
}
div span:nth-of-type(1){
top: 250px;
}
div span:nth-of-type(2){
top: 300px;
}
div span:nth-of-type(3){
top: 350px;
}
div span:nth-of-type(4){
top: 400px;
}
@keyframes spread {
0%{
right: 0px;
opacity: 0;
}
25%{
right: 10px;
opacity: 0.25;
}
50%{
right: 20px;
opacity: 0.45;
}
75%{
right: 35px;
opacity: 0.75;
}
100%{
right: 45px;
opacity: 1;
}
}
img:hover+span{
animation:spread 1s both;
}
</style>
</head>
<body>
<img src="img.bmp">
<div>
<img src="toolbar_05.png"><span>购物车</span>
<img src="toolbar_10.png"><span>我的关注</span>
<img src="toolbar_15.png"><span>我的足迹</span>
<img src="toolbar_19.png"><span>我的消息</span>
</div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.title{
width: 1181px;
height: 780px;
border: 1px solid;
background:#B2B8CA ;
animation:spreads 15s ease-in-out 1s infinite both;
}
.d1{
position: absolute;
bottom:-50px;
z-index: 2;
}
.one{
position: absolute;
z-index: 0;
left: 600px;
top: 400px;
}
.two{
position: absolute;
z-index: 1;
left: 670px;
bottom: 120px;
}
.two2{
position: absolute;
z-index: 1;
left: 160px;
bottom: 120px;
}
.two3{
position: absolute;
z-index: 1;
left: 10px;
bottom: 140px;
}
.thr{
position: absolute;
z-index: 3;
bottom: 120px;
left: 460px;
}
.for{
position: absolute;
z-index: 3;
bottom: 40px;
left: 730px;
}.fiv{
position: absolute;
z-index: 4;
bottom: 90px;
left: 10px;
}
.six{
position: absolute;
z-index: 5;
bottom: -40px;
left: -50px;
}
.six2{
position: absolute;
z-index: 5;
bottom: -40px;
left: 750px;
}
.svn{
position: absolute;
z-index: 6;
bottom: 50px;
left:200px;
}
.eht{
position: absolute;
z-index: 7;
bottom: -50px;
left:150px;
}.eht2{
position: absolute;
z-index: 7;
bottom: -50px;
left:900px;
}
.eht3{
position: absolute;
z-index: 7;
bottom: -50px;
left:-550px;
}
.nie1{
position: absolute;
right: 400px;
top: 50px;
}
.nie2{
position: absolute;
right: 900px;
top: 150px;
}
.nie3{
position: absolute;
left: 100px;
top: 150px;
}
.ten{
position: absolute;
right: 270px;
z-index: 9;
top: 180px;
transform: rotate(20deg);
animation:spread 15s linear 1s infinite alternate;
}
@keyframes spread {
0% {
right: 260px;
top: 120px;
transform: rotate(20deg);
}
25% {
right: 460px;
top: 120px;
transform: rotate(30deg);
}
50% {
right: 660px;
top: 120px;
transform: rotate(60deg);
}
75% {
right: 860px;
top: 120px;
transform: rotate(30deg);
}
100% {
right: 1260px;
top: 120px;
transform: rotate(0deg);
}
}
@keyframes spreads {
0% {
background:#B2B8CA ;
}
50% {
background: #280E3E;
}
100% {
background: #634977;
}
}
</style>
</head>
<body>
<div class="title">
<div class="ten"><img src="balloon.png"></div>
<div class="one"><img src="beans.png"></div>
<div class="nie1"><img src="cloudLarge.png"></div>
<div class="nie2"><img src="cloudMedium.png"></div>
<div class="nie3"><img src="cloudSmall.png"></div>
<div class="fiv" ><img src="dowEventCenter.png"></div>
<div class="svn"><img src="friendshipShell.png"></div>
<div class="thr"><img src="Glockenspiel.png"></div>
<div class="d1"><img src="groundBack.png"></div>
<div class="eht"><img src="groundFront.png"></div>
<div class="eht2"><img src="groundFront.png"></div>
<div class="eht3"><img src="groundFront.png"></div>
<div class="six"><img src="groundMid.png"></div>
<div class="six2"><img src="groundMid.png"></div>
<div class="for"><img src="Planetarium.png"></div>
<div class="two"><img src="skyline.png"></div>
<div class="two2"><img src="skyline.png"></div>
<div class="two3"><img src="skyline.png"></div>
</div>
</body>
</html>