實(shí)驗(yàn)指導(dǎo)方案css3小船水面行駛項(xiàng)目講解

CSS技術(shù)，完成了一個(gè)小船水中行駛的動(dòng)畫效果。具體效果如下?？捎脼gindex.html文件，查看項(xiàng)目演示效果。CSSCSS3CSS如圖所示，整個(gè)頁(yè)面是多個(gè)div構(gòu)成的。具體結(jié)構(gòu)如下bodydivdivbodybodydivdiv<!DOCTYPE<!DOCTYPE<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"*padding:margin:}bodyposition:relative;background:#34b1cc;overflowhidden;/*內(nèi)容溢出時(shí)隱藏}.landheight:80px;width:100%;position:absolute;top:270px;background:#afa;}.land_01width:height:border-left:300pxsolidtransparent;border-bottom:120pxsolid#afa;position:absolute;left:0px;top:-120px;}.land_01:after{content:"";width:0;height:border-right:150pxsolidtransparent;border-bottom:120pxsolid#afa;position:absolute;}.land_02width:height:border-left:300pxsolidtransparent;border-bottom:100pxsolid#afa;position:absolute;left:150px;top:-}.land_02:after{content:"";width:0;height:border-right:350pxsolidtransparent;border-bottom:100pxsolid#afa;position:absolute;left:}.land_03width:height:border-left:200pxsolidtransparent;border-bottom:20pxsolid#afa;position:absolute;left:700px;top:-20px;}.land_03:after{content:"";width:0;height:border-right:150pxsolidtransparent;border-bottom:20pxsolid#afa;position:absolute;left:}.land_04width:height:border-left:200pxsolidtransparent;border-bottom:50pxsolid#afa;position:absolute;left:1000px;top:-50px;}.land_04:after{content:"";width:0;height:border-right:150pxsolidborder-bottom:50pxsolid#afa;position:absolute;left:}.shipposition:absolute;width:400px;height:370px;top:100px;left:0%;animation:boat20s-webkit-animation:boat20s}.ship_01width:height:border-left:150pxsolidtransparent;border-bottom:300pxsolid#ff5d89;position:absolute;left:}.ship_01:before{content:"";width:0px;height:0px;border-left:80pxsolidtransparent;border-bottom:180pxsolid#FF5D89;position:absolute;left:-275px;top:120px;}.ship_02width:250px;height:40px;background:#ff5d89;position:absolute;top:300px;left:}.ship_02:before,.ship_02:after{content:"";width:height:border-top:40pxsolid#ff5d89;position:absolute;}.ship_02:beforeborder-left:40pxsolidtransparent;left:-40px;}.ship_02:afterborder-right:40pxsolidtransparent;right:-40px;}.ship_03width:height:border-right:90pxsolidtransparent;border-bottom:280pxsolid#ff5d89;position:absolute;left:300px;top:20px;}.ship_03:before{content:"";width:0px;height:0px;border-right:90pxsolidtransparent;border-bottom:25pxsolid#34b1cc;position:absolute;top:}@keyframesboat