2018-09-10

   

   

   

animation动画

   

   

   

多帧动画

   

   

   

文字遮罩

   

   

   

   

   

我是接盘侠

附录

css文件如下：

*{

    margin: 0;

    padding: 0;

}

.box1{

    width: 960px;

    height: 40px;

    background-color: #55a8ea;

    margin: 50px auto;

    position: relative;

}

.box1 ul{

    list-style: none;

}

.box1 li{

    width: 100px;

    height: 40px;

    float: left;

}

.box1 a{

    display: block;

    text-decoration: none;

    color: #fff;

    text-align: center;

    font: 14px 微软雅黑;

    padding: 10px;

}

.box1 li:hover{

    background-color:#00619f ;

}

.box1 img{

    position: absolute;

    left: 430px;

    top:-10px;

}

.box2{

    width: 960px;

    height: 269px;

    border: 1px solid #cccccc;

    margin: 50px auto;

    /*position: relative;*/

}

h3{

    /*position: absolute;*/

    /*left: 35px;*/

    /*top:10px;*/

    padding: 12.6px 35px;

}

.box3{

    width: 920px;

    height: 219px;

    border-top:1px solid #cccccc ;

    margin: 0 20px;

    /*position: absolute;*/

    /*top:50px;*/

    /*left: 20px;*/

    /*position: relative;*/

}

.box4{

    width: 100px;

    border-top:1.5px solid red ;

}

.p1{

    float: left;

    padding: 20px 14.5px 5px 0;

}

.p2{

    float: left;

    padding: 20px 14.5px 5px 14.5px;

}

.p3{

    padding: 20px 0 5px 14.5px;;

}

.box2 img:hover{

  transform: translateY(-5px);

}

/*#p1{*/

    /*position: absolute;*/

    /*left: 0;*/

    /*top:20px;*/

/*}*/

/*#p2{*/

    /*position: absolute;*/

    /*left: 189px;*/

    /*top:20px;*/

/*}*/

/*#p3{*/

    /*position: absolute;*/

    /*left: 378px;*/

    /*top:20px;*/

/*}*/

/*#p4{*/

    /*position: absolute;*/

    /*left: 567px;*/

    /*top:20px;*/

/*}*/

/*#p5{*/

    /*position: absolute;*/

    /*left: 756px;*/

    /*top:20px;*/

/*}*/

/*#p6{*/

    /*position: absolute;*/

    /*left: 0;*/

    /*top:113px;*/

/*}*/

/*#p7{*/

    /*position: absolute;*/

    /*left: 189px;*/

    /*top:113px;*/

/*}*/

/*#p8{*/

    /*position: absolute;*/

    /*left: 378px;*/

    /*top:113px;*/

/*}*/

/*#p9{*/

    /*position: absolute;*/

    /*left: 567px;*/

    /*top:113px;*/

/*}*/

/*#p10{*/

    /*position: absolute;*/

    /*left: 756px;*/

    /*top:113px;*/

/*}*/

html文件如下：

   

   

   

   

       

• 首页

       

• 网站建设

       

• 程序开发

       

• 网络营销

       

• 企业VI

       

• 案例展示

       

• 联系我们

   

   

   

图片展示