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

冰艺小例子1

2016-07-07 08:46 411 查看
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link
rel="stylesheet"
href="css/animate.css" />
<title></title>
<style>
@-webkit-keyframes
move{
from{
webkit-transform: translateY(0px);
-ms-transform:  translateY(0px);
-o-transform:  translateY(0px);
transform: translateY(0px);
}

to{
webkit-transform: translateY(-20px);
-ms-transform:  translateY(-20px);
-o-transform:  translateY(-20px);
transform: translateY(-20px);
}
}
@-webkit-keyframes move2{
from{
webkit-transform: translateY(0px);
-ms-transform:  translateY(0px);
-o-transform:  translateY(0px);
transform: translateY(0px);
}

to{
webkit-transform: translateY(40px);
-ms-transform:  translateY(40px);
-o-transform:  translateY(40px);
transform: translateY(40px);
}
}
@-webkit-keyframes move3{
from{
webkit-transform: translateY(0px);
-ms-transform:  translateY(0px);
-o-transform:  translateY(0px);
transform: translateY(0px);
}

to{
webkit-transform: translateY(-60px);
-ms-transform:  translateY(-60px);
-o-transform:  translateY(-60px);
transform: translateY(-60px);
}
}
*{
margin:
0;
padding:
0;
}

body,html{
height:
100%;
font-size:
10px;
background-color:
#F2F2F2;
}

.nav{
background-color: black;
height:
65px;
overflow:
hidden;
position:
fixed;
width:
100%;
opacity:
0.8;
}
.option{
float:
left;
}
.nc_as{
float:
right;
}
.nav_content{
overflow:
hidden;
margin:
0 auto;
width:
980px;
margin-top:
10px;
}
.nav_1{
position:
fixed;
width:
100%;
}
.logo{
background:
url('img/logo.png')
no-repeat 0 -3px;
width:
149px;
height:
33px;
}
.logo:hover{
background:
url('img/logo.png')
no-repeat 0 -41px;
width:
149px;
height:
33px;
}
.nc_as{
margin-top:
10px;
}

.nc_as
a{
color: white;
font-size:
14px;
font-weight:
1;
text-decoration:
none;
margin-right:
20px;
padding-right:
10px;
}
.nc_as
a:hover{
color:
#B6F44A;
}
header{
background: url(img/c2.jpg)
no-repeat;
text-align: center;
padding-top:
100px;
background-size:
100%;
}
header
img{
margin-bottom:
20px;

}
.a{
width:
880px;
height:
40px;
color: gainsboro;
margin:
20px auto;
overflow:
hidden;
word-spacing:
20px;
}
a{
text-decoration:
none;
}
.a_left{
float:
left;
f }
.a_left
img{
margin-right:
-20px;
}
.a_right{
float:
right;
}
hr{
margin-top:
-30px;
}
.b{
width:
880px;
height:
100px;
color: gainsboro;
margin:
20px auto;
text-align: center;
position:
relative;
}
.b_vb{
background:
url('img/jing.png')
no-repeat -624px -600px;
width:
92px;
height:
96px;
display:
inline-block;
position:
absolute;
top:
0px;
left:
260px;
}
.b_vb:hover{
background:
url('img/jing.png')
no-repeat -743px -604px;
width:
92px;
height:
96px;
-webkit-animation:"move"
1s ;
-o-animation:"move"
1s ;
animation:"move"
1s ;
}
.b_interface{
background:
url('img/jing.png')
no-repeat -743px -301px;
width:
92px;
height:
96px;
display:
inline-block;
position:
absolute;
top:
0px;
left:
360px;
}
.b_interface:hover{
background:
url('img/jing.png')
no-repeat -739px -441px;
width:
92px;
height:
96px;
-webkit-animation:"move"
1s ;
-o-animation:"move"
1s ;
animation:"move"
1s ;
}
.b_logo{
background:
url('img/jing.png')
no-repeat -894px -301px;
width:
91px;
height:
96px;
display:
inline-block;
position:
absolute;
top:
0px;
left:
460px;
}
.b_logo:hover{
background:
url('img/jing.png')
no-repeat -889px -443px;
width:
91px;
height:
96px;
-webkit-animation:"move"
1s ;
-o-animation:"move"
1s ;
animation:"move"
1s ;
}
.b_media{
background:
url('img/jing.png')
no-repeat -887px -573px;
width:
93px;
height:
96px;
display:
inline-block;
position:
absolute;
top:
0px;
left:
560px;
}
.b_media:hover{
background:
url('img/jing.png')
no-repeat -887px -701px;
width:
93px;
height:
96px;
-webkit-animation:"move"
1s ;
-o-animation:"move"
1s ;
animation:"move"
1s ;
}
.b_middle
img{
position:
absolute;
top:
53px;
left:-16px;
}
.b_bottom{

}
.b_red{
position:
absolute;
top:
70px;
left:
750px;
width:
10px;
height:
10px;
background-color: red;
}
.b_purple{
position:
absolute;
top:
70px;
left:
761px;
width:
10px;
height:
10px;
background-color: mediumpurple;
}
.b_blue{
position:
absolute;
top:
70px;
left:
772px;
width:
10px;
height:
10px;
background-color: deepskyblue;
}
.b_green{
position:
absolute;
top:
70px;
left:
783px;
width:
10px;
height:
10px;
background-color: lawngreen;
}
.b_yellow{
position:
absolute;
top:
70px;
left:
794px;
width:
10px;
height:
10px;
background-color: yellow;
}
.b_orange{
position:
absolute;
top:
70px;
left:
805px;
width:
10px;
height:
10px;
background-color:orangered;
}
.b_gray{
position:
absolute;
top:
70px;
left:
816px;
width:
10px;
height:
10px;
background-color:
lightgray;
}

.top{
width:
980px;
margin:
auto;
text-align: center;
padding-right:
20px;
}
.top1{
width:
262px;
height:
148px;
position:
relative;
background:url(img/p2.png)
no-repeat;
background-position: 
-20px
130px;

display:
inline-block;
margin:
20px 20px;

}
.top11{
padding:
10px;
width:
262px;
height:
148px;
border:
1px solid
#E2E2E2;
border-radius:
8px;

}
.top11:hover{
-webkit-animation:"move"
1s ;
-o-animation:"move"
1s ;
animation:"move"
1s ;
}
.top01{
position:
absolute;
top:
10px;
left:
10px;
width:
262px;
height:
148px;
border-radius:
8px;
background-color:rgba(0,0,0,0.6);
opacity:
0;
}
.top01:hover{
opacity:
1;
}
.tu2{
position:
absolute;
top:
0px;
right:
95px;
}
.top11:hover
.tu2{
opacity:
1;
-webkit-animation:"move2"
1s forwards;
-o-animation:"move2"
1s forwards;
animation:"move2"
1s forwards;
}
.top
.top1:nth-child(1)
.top11{
background:
url("img/p25.jpg")
no-repeat;
background-position:
10px
10px;
}

.top
.top1:nth-child(2)
.top11{
background: url(img/p20.png)
no-repeat;
background-position:
10px
10px;
}
.top
.top1:nth-child(3)
.top11{
background: url(img/p23.png)
no-repeat;
background-position:
10px
10px;
}
.top2
.top1:nth-child(1)
.top11{
background:
url("img/p21.jpg")
no-repeat;
background-position:
10px
10px;
}

.top2
.top1:nth-child(2)
.top11{
background: url(img/p22.jpg)
no-repeat;
background-position:
10px
10px;
}
.top2
.top1:nth-child(3)
.top11{
background: url(img/p24.jpg)
no-repeat;
background-position:
10px
10px;
}
hr{
border:
1px solid
#DDDDDD;
width:
100%;

}
.d{
margin-top:
100px;
text-align: center;
position:
relative;
}
.d_1{
background:
url('img/images.png')
no-repeat -603px -332px;
width:
91px;
height:
91px;
display:
inline-block;
position:
absolute;
top:
-40px;
left:
545px;
}
.d_1:hover{
background:
url('img/images.png')
no-repeat -603px -426px;
width:
91px;
height:
91px;
}
.d_2{
background:
url('img/images.png')
no-repeat -728px -332px;
width:
91px;
height:
91px;
display:
inline-block;
position:
absolute;
top:
-40px;
left:
695px;
}
.d_2:hover{
background:
url('img/images.png')
no-repeat -728px -426px;
width:
91px;
height:
91px;
}
.d_3{
background:
url('img/images.png')
no-repeat -854px -332px;
width:
91px;
height:
91px;
display:
inline-block;
position:
absolute;
top:
-40px;
left:
845px;
}
.d_3:hover{
background:
url('img/images.png')
no-repeat -854px -426px;
width:
91px;
height:
91px;
}
.d_4{
background:
url('img/images.png')
no-repeat -980px -332px;
width:
91px;
height:
91px;
display:
inline-block;
position:
absolute;
top:-40px;
left:
995px;
}
.d_4:hover{
background:
url('img/images.png')
no-repeat -980px -426px;
width:
91px;
height:
91px;
}
.d_5{
background:
url('img/images.png')
no-repeat -1106px -332px;
width:
91px;
height:
91px;
display:
inline-block;
position:
absolute;
top:
-40px;
left:
1145px;
}
.d_5:hover{
background:
url('img/images.png')
no-repeat -1106px -426px;
width:
91px;
height:
91px;
}
.d
p{
margin-top:
90px;
text-align: center;
color:
#9B9592;
word-spacing:
0.3rem;
}
.d
span{
color:
#CEC751;
}
footer{
margin:
auto;
width:
100%;
/*margin-left: -70px*/
text-align:
center;
}
footer:hover
img{

-webkit-animation:"move3"
0.5s forwards;
-o-animation:"move3"
0.5s forwards;
animation:"move3"
0.5s forwards;
}
</style>
</head>
<body>
<div
id="head">
<div
class="nav"></div>
<div
class="nav_1">
<div
class="nav_content">
<a
class="option"
href="#">
<div
class="logo"></div>
</a>
<div
class="nc_as">
<a
href="creat.html">HOME</a>
<a
href="case.html">CASE</a>
<a
href="contacts.html">CONTACTS</a>
<a
href="about.html">ABOUT US</a>
<a
href="#">MY LOGO</a>
</div>
</div>
</div>
</div>
<header>
<img
src="img/t8.png"
alt="" />
</header>
<section
class="a">
<div
class="a_left">
<p>
<img
src="img/s.png"
alt="" />
<a
href="">LOCAION >>Home >>Case</a>
</p>
</div>
<div
class="a_right">
<p><a
href="">2010Editior</a></p>
</div>
</section>
<hr />
<section
class="b">
<div
class="b_top">
<div
class="b_vb"></div>
<div
class="b_interface"></div>
<div
class="b_logo"></div>
<div
class="b_media"></div>
</div>
<div
class="b_middle"> <img
src="img/t.png"
alt="" /></div>
<div
class="b_bottom">
<a
href=""><div
class="b_red"></div></a>
<a
href=""><div
class="b_purple"></div></a>
<a
href=""><div
class="b_blue"></div></a>
<a
href=""><div
class="b_green"></div></a>
<a
href=""><div
class="b_yellow"></div></a>
<a
href=""><div
class="b_orange"></div></a>
<a
href=""><div
class="b_gray"></div></a>
</div>
</section>
<section
class="c">
<div
class="top">
<div
class="top1">
<div
class="top11">
<div
class="top01">
<img
src="img/p13.png" 
class="tu2" alt=""
/>
</div>
</div>

</div>
<div
class="top1">
<div
class="top11">
<div
class="top01">
<img
src="img/p13.png" 
class="tu2" alt=""
/>
</div>
</div>

</div>
<div
class="top1">
<div
class="top11">
<div
class="top01">
<img
src="img/p13.png" 
class="tu2" alt=""
/>
</div>
</div>

</div>
<div
class="top2">
<div
class="top1">
<div
class="top11">
<div
class="top01">
<img
src="img/p13.png" 
class="tu2" alt=""
/>
</div>
</div>

</div>
<div
class="top1">
<div
class="top11">
<div
class="top01">
<img
src="img/p13.png" 
class="tu2" alt=""
/>
</div>
</div>

</div>
<div
class="top1">
<div
class="top11">
<div
class="top01">
<img
src="img/p13.png" 
class="tu2" alt=""
/>
</div>
</div>

</div>
</div>
</div>
</section>
<section
class="d">
<hr
/>
<div
class="d_1"></div>
<div
class="d_2"></div>
<div
class="d_3"></div>
<div
class="d_4"></div>
<div
class="d_5"></div>
<p>
Copyright © 2010-2014 <span>IceArt</span>  All Internet
</p>
</section>
<footer>
<img
src="img/a9.png"
alt="" />
</footer>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css html 布局 动画