程序博客网 > 今目标是什么软件

冰艺小例子3

来源：互联网 发布：今目标是什么软件 编辑：程序博客网 时间：2024/05/16 00:51

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<title></title>

<linkrel="stylesheet" href="css/animate.css" />

<styletype="text/css">

@-webkit-keyframesmove{

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_asa{

color: white;

font-size:14px;

font-weight:1;

text-decoration:none;

margin-right:20px;

padding-right:10px;

}

.nc_asa:hover{

color:#B6F44A;

}

header{

width:100%;

}

headerimg{

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;

}

.bimg{

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_leftimg{

margin:20px 20px10px 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_rightimg{

margin:20px 10px10px 20px;

}

.d_r1{

overflow:hidden;

}

.d_r2{

float:left;

}

.d_r3{

float:right;

width:325px;

}

.d_r3img{

margin-left:-10px;

margin-right:20px;

}

.d_r3p{

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;

}

.ep{

margin-top:90px;

text-align: center;

color:#9B9592;

word-spacing:0.3rem;

}

.espan{

color:#CEC751;

}

footer{

margin:auto;

width:100%;

/*margin-left: -70px;*/

text-align:center;

}

footer:hoverimg{

-webkit-animation:"move3"0.5s forwards;

-o-animation:"move3"0.5s forwards;

animation:"move3"0.5s forwards;

}

</style>

</head>

<body>

<divid="head">

<div class="nav"></div>

<divclass="nav_1">

<divclass="nav_content">

<aclass="option" href="#">

<divclass="logo"></div>

</a>

<divclass="nc_as">

<ahref="creat.html">HOME</a>

<ahref="case.html">CASE</a>

<ahref="contacts.html">CONTACTS</a>

<ahref="about.html">ABOUT US</a>

<ahref="#">MY LOGO</a>

</div>

</div>

</div>

</div>

<header><imgsrc="img/p1.png" alt="" /></header>

<section class="a">

<divclass="top">

<divclass="top1">

<divclass="top11">

<divclass="top01">

<imgsrc="img/p19.png" class="tu1" alt=""/>

<imgsrc="img/p13.png"  class="tu2" alt=""/>

</div>

</div>

</div>

<divclass="top1">

<divclass="top11">

<divclass="top01">

<imgsrc="img/p19.png" class="tu1" alt=""/>

<imgsrc="img/p13.png"  class="tu2" alt=""/>

</div>

</div>

</div>

<divclass="top1">

<divclass="top11">

<divclass="top01">

<imgsrc="img/p19.png" class="tu1" alt=""/>

<imgsrc="img/p13.png"  class="tu2" alt=""/>

</div>

</div>

</div>

<divclass="top2">

<divclass="top1">

<divclass="top11">

<divclass="top01">

<imgsrc="img/p19.png" class="tu1" alt=""/>

<imgsrc="img/p13.png"  class="tu2" alt=""/>

</div>

</div>

</div>

<divclass="top1">

<divclass="top11">

<divclass="top01">

<imgsrc="img/p19.png" class="tu1" alt=""/>

<imgsrc="img/p13.png"  class="tu2" alt=""/>

</div>

</div>

</div>

<divclass="top1">

<divclass="top11">

<divclass="top01">

<imgsrc="img/p19.png" class="tu1" alt=""/>

<imgsrc="img/p13.png"  class="tu2" alt=""/>

</div>

</div>

</div>

</div>

</div>

</section>

<section class="b">

<imgsrc="img/p17.png" alt="" />

<div class="more"></div>

</section>

<section class="c">

<divclass="c_left">

<divclass="c_l1"></div>

<divclass="c_l2"></div>

</div>

<divclass="c_middle">

<divclass="c_m1"></div>

<divclass="c_m2"></div>

</div>

<divclass="c_right">

<divclass="c_r1"></div>

<divclass="c_r2"></div>

</div>

</section>

<section class="d">

<div class="age"></div>

<divclass="d_left">

<imgsrc="img/p10.jpg" alt="" />

<divclass="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>

<divclass="d_right">

<imgsrc="img/p18.png" alt="" />

<divclass="d_r1">

<divclass="d_r2"><imgsrc="img/p16.png" alt="" /></div>

<divclass="d_r3">

<imgsrc="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>

<imgsrc="img/a9.png" alt="" />

</footer>

</body>

</html>

0 0
今目标是什么软件 今目标是什么软件
原创粉丝点击
热门IT博客
网络空间安全考研网络空间安全考研
淘宝cpu散片淘宝cpu散片
南风知我意七微百度云
js 获取style display
图形界面网络配置
面向接口编程的好处
sql server数据库集群
无期徒刑 知乎
淘宝买苹果6美版靠谱吗
burgers方程python求解
剑网3捏脸数据成男苍云
mysql教程
试卷分析软件
erp软件实施
js 画弧线
java定义长整型变量a
双色球33缩水软件
个人记功软件
mysql索引创建方式详解
鬼干部暗示什么知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 子非鱼焉知鱼之乐全文 鱼乐宝能直接加鱼缸吗 鱼乐寻宝 乐鱼播放器 乐鱼播放器手机版下载 乐鱼影音盒 鱼乐网 乐乐鱼 红头鱼 一起炫乒乓 乒乓球比赛 乒乓球拍 乒乓球规则 乒乓球英文 乒乓 乒乓球吧 乒乓球英语 乒乓球教练 精英乒乓网 乒乓拼音 乒乓球拼音 打乒乓球 乒乓菊 乒乓外交 乒乓规则 精英乒乓 乒乓球冠军 乒乓网 乒乓世界杯 乒乓教练 陈冬冬乒乓 中国乒乓球 乒乓球发球 乒乓球好处 乒乓球排名 乒乓球图片 王涛乒乓球 乒乓世锦赛 乒乓英语 中国乒乓 日本乒乓球

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里