<!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">
<title></title>
<link rel="stylesheet" href="css/animate.css" />
<style type="text/css">
@-webkit-keyframes move{
from{
webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
to{
webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@-webkit-keyframes move1{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
-o-transform: translateX(30px);
transform: translateX(30px);
}
}
@-webkit-keyframes move2{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
}
}
@-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{
width: 100%;
}
header img{
width: 100%;
margin-top: 60px;
}
section{
width: 980px;
margin: 10px auto;
}
.top{
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;
}
.tu1{
position: absolute;
top: 40px;
left: 10px;
}
.tu2{
position: absolute;
top: 40px;
right: 10px;
}
.top11:hover .tu1{
opacity: 1;
-webkit-animation:"move1" 1s forwards;
-o-animation:"move1" 1s forwards;
animation:"move1" 1s forwards;
}
.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;
}
.b{
width: 894px;
height: 80px;
border: 1px solid #E2E2E2;
border-radius: 8px;
margin: 20px auto;
overflow: hidden;
}
.b img{
margin: 20px;
float: left;
}
.more{
float: right;
background: url('img/1.png') no-repeat 0 0;
width: 157px;
height: 41px;
margin: 20px;
}
.more:hover{
background: url('img/1.png') no-repeat 0 -71px;
width: 157px;
height: 41px;
}
.c{
width: 894px;
height: 200px;
border: 1px solid #E2E2E2;
border-radius: 8px;
margin: 20px auto;
background-color: #F9F9F9;
}
.c_left{
display: inline-block;
padding: 5px;
border-right: 1px solid #ECECEC;
}
.c_middle{
display: inline-block;
padding: 5px;
border-right: 1px solid #ECECEC;
}
.c_right{
display: inline-block;
padding: 5px;
}
.c_l1{
background: url('img/images.png') no-repeat -9px -10px;
width: 285px;
height: 94px;
}
.c_l1:hover{
background: url('img/images.png') no-repeat -9px -122px;
width: 285px;
height: 94px;
}
.c_l2{
background: url('img/images.png') no-repeat -908px -11px;
width: 285px;
height: 94px;
margin-top: 8px;
}
.c_l2:hover{
background: url('img/images.png') no-repeat -908px -122px;
width: 285px;
height: 94px;
}
.c_m1{
background: url('img/images.png') no-repeat -307px -10px;
width: 285px;
height: 94px;
}
.c_m1:hover{
background: url('img/images.png') no-repeat -307px -122px;
width: 285px;
height: 94px;
}
.c_m2{
background: url('img/images.png') no-repeat -9px -234px;
width: 285px;
height: 94px;
margin-top: 8px;
}
.c_m2:hover{
background: url('img/images.png') no-repeat -9px -345px;
width: 285px;
height: 94px;
}
.c_r1{
background: url('img/images.png') no-repeat -606px -11px;
width: 285px;
height: 94px;
}
.c_r1:hover{
background: url('img/images.png') no-repeat -606px -122px;
width: 285px;
height: 94px;
}
.c_r2{
background: url('img/images.png') no-repeat -307px -234px;
width: 285px;
height: 94px;
margin-top: 8px;
}
.c_r2:hover{
background: url('img/images.png') no-repeat -307px -345px;
width: 285px;
height: 94px;
}
.d{
width: 894px;
height: 300px;
margin: 20px auto;
background-color: #F9F9F9;
overflow: hidden;
position: relative;
}
.d_left{
width: 290px;
height: 300px;
border: 1px solid #E2E2E2;
border-radius: 8px;
float: left;
}
.d_right{
width: 590px;
height: 300px;
border: 1px solid #E2E2E2;
border-radius: 8px;
float: right;
}
.d_left img{
margin: 20px 20px 10px 20px;
}
.age{
background: url('img/images.png') no-repeat -600px -224px;
width: 99px;
height: 49px;
position: absolute;
top: 30px;
left: -2px;
}
.age:hover{
background: url('img/images.png') no-repeat -600px -281px;
width: 98px;
height: 49px;
}
.word{
margin: 0px 20px ;
font-size: 1.2rem;
color: #787878;
line-height: 1.6rem;
}
.d_right img{
margin: 20px 10px 10px 20px;
}
.d_r1{
overflow: hidden;
}
.d_r2{
float: left;
}
.d_r3{
float: right;
width: 325px;
}
.d_r3 img{
margin-left: -10px;
margin-right: 20px;
}
.d_r3 p{
font-size: 1.2rem;
color: #787878;
line-height: 1.8rem;
margin-right: 20px;
}
hr{
border: 1px solid #DDDDDD;
width: 100%;
}
.e{
margin-top: 100px;
text-align: center;
position: relative;
}
.e_1{
background: url('img/images.png') no-repeat -603px -332px;
width: 91px;
height: 91px;
display: inline-block;
position: absolute;
top: -40px;
left: 180px;
}
.e_1:hover{
background: url('img/images.png') no-repeat -603px -426px;
width: 91px;
height: 91px;
}
.e_2{
background: url('img/images.png') no-repeat -728px -332px;
width: 91px;
height: 91px;
display: inline-block;
position: absolute;
top: -40px;
left: 330px;
}
.e_2:hover{
background: url('img/images.png') no-repeat -728px -426px;
width: 91px;
height: 91px;
}
.e_3{
background: url('img/images.png') no-repeat -854px -332px;
width: 91px;
height: 91px;
display: inline-block;
position: absolute;
top: -40px;
left: 475px;
}
.e_3:hover{
background: url('img/images.png') no-repeat -854px -426px;
width: 91px;
height: 91px;
}
.e_4{
background: url('img/images.png') no-repeat -980px -332px;
width: 91px;
height: 91px;
display: inline-block;
position: absolute;
top:-40px;
left: 620px;
}
.e_4:hover{
background: url('img/images.png') no-repeat -980px -426px;
width: 91px;
height: 91px;
}
.e_5{
background: url('img/images.png') no-repeat -1106px -332px;
width: 91px;
height: 91px;
display: inline-block;
position: absolute;
top: -40px;
left: 760px;
}
.e_5:hover{
background: url('img/images.png') no-repeat -1106px -426px;
width: 91px;
height: 91px;
}
.e p{
margin-top: 90px;
text-align: center;
color: #9B9592;
word-spacing: 0.3rem;
}
.e 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/p1.png" alt="" /></header>
<section class="a">
<div class="top">
<div class="top1">
<div class="top11">
<div class="top01">
<img src="img/p19.png" class="tu1" alt="" />
<img src="img/p13.png" class="tu2" alt="" />
</div>
</div>
</div>
<div class="top1">
<div class="top11">
<div class="top01">
<img src="img/p19.png" class="tu1" alt="" />
<img src="img/p13.png" class="tu2" alt="" />
</div>
</div>
</div>
<div class="top1">
<div class="top11">
<div class="top01">
<img src="img/p19.png" class="tu1" alt="" />
<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/p19.png" class="tu1" alt="" />
<img src="img/p13.png" class="tu2" alt="" />
</div>
</div>
</div>
<div class="top1">
<div class="top11">
<div class="top01">
<img src="img/p19.png" class="tu1" alt="" />
<img src="img/p13.png" class="tu2" alt="" />
</div>
</div>
</div>
<div class="top1">
<div class="top11">
<div class="top01">
<img src="img/p19.png" class="tu1" alt="" />
<img src="img/p13.png" class="tu2" alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
<section class="b">
<img src="img/p17.png" alt="" />
<div class="more"></div>
</section>
<section class="c">
<div class="c_left">
<div class="c_l1"></div>
<div class="c_l2"></div>
</div>
<div class="c_middle">
<div class="c_m1"></div>
<div class="c_m2"></div>
</div>
<div class="c_right">
<div class="c_r1"></div>
<div class="c_r2"></div>
</div>
</section>
<section class="d">
<div class="age"></div>
<div class="d_left">
<img src="img/p10.jpg" alt="" />
<div class="word">
<p>冰艺工作室’国内优秀互联网建设平台
</p>
<p>创始人：国内优秀设计师站酷推荐设计师、韩冰云
</p>
<p>Ice art was founded in 2010, is by a group of professional and unique team of IT elite.
</p>
<p>All along, Iceart close to network development trend of age of art..
</p>
</div>
</div>
<div class="d_right">
<img src="img/p18.png" alt="" />
<div class="d_r1">
<div class="d_r2"><img src="img/p16.png" alt="" /></div>
<div class="d_r3">
<img src="img/p15.png" alt="" />
<p>致力于视觉传达领域,提供企业形象管理,视觉创意设计网站建设与维护、多媒体设计制作等服务, 目前已形成一套科学完整、高效的设计运作体系，凭借高品位的设计风格、精湛的制作工艺..
</p>
</div>
</div>
</div>
</section>
<section class="e">
<hr />
<div class="e_1"></div>
<div class="e_2"></div>
<div class="e_3"></div>
<div class="e_4"></div>
<div class="e_5"></div>
<p>
Copyright © 2010-2014 <span>IceArt</span> All Internet
</p>
</section>
<footer>
<img src="img/a9.png" alt="" />
</footer>
</body>
</html>
扫一扫
8
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
