动画设计

过渡动画

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
        
案例展示
        
联系我们
    
    


    
图片展示
    

        

        
        
        
        
        
        
        
        
        
        
    



结果如下：

标题栏二.png