基于css3小船水面游动动画特效_html/css

* { padding: 0; margin: 0; } body { position: relative; background: #0cc; overflow: hidden; } .land { height: 100px; width: 100%; position: absolute; top: 270px; background: #afa; } .land_01 { width: 0; height: 0; border-left: 300px solid transparent; border-bottom: 120px solid #afa; position: absolute; left: 0px; top: -120px; } .land_01:after { content: ""; width: 0; height: 0; border-right: 150px solid transparent; border-bottom: 120px solid #afa; position: absolute; } .land_02 { width: 0; height: 0; border-left: 300px solid transparent; border-bottom: 100px solid #afa; position: absolute; left: 150px; top: -100px; } .land_02:after { content: ""; width: 0; height: 0; border-right: 350px solid transparent; border-bottom: 100px solid #afa; position: absolute; left: 0px; } .land_03 { width: 0; height: 0; border-left: 200px solid transparent; border-bottom: 20px solid #afa; position: absolute; left: 700px; top: -20px; } .land_03:after { content: ""; width: 0; height: 0; border-right: 150px solid transparent; border-bottom: 20px solid #afa; position: absolute; left: 0px; } .land_04 { width: 0; height: 0; border-left: 200px solid transparent; border-bottom: 50px solid #afa; position: absolute; left: 1000px; top: -50px; } .land_04:after { content: ""; width: 0; height: 0; border-right: 150px solid transparent; border-bottom: 50px solid #afa; position: absolute; left: 0px; } .ship { position: absolute; width: 400px; height: 370px; top: 100px; left: 0%; animation: boat 20s infinite; -webkit-animation: boat 20s infinite; } .ship_01 { width: 0; height: 0; border-left: 150px solid transparent; border-bottom: 300px solid #ff5d; position: absolute; left: 140px; } .ship_01:before { content: ""; width: 0px; height: 0px; border-left: 80px solid transparent; border-bottom: 180px solid #FF5D; position: absolute; left: -275px; top: 120px; } .ship_02 { width: 250px; height: 40px; background: #ff5d; position: absolute; top: 300px; left: 100px; } .ship_02:before, .ship_02:after { content: ""; width: 0; height: 0; border-top: 40px solid #ff5d; position: absolute; } .ship_02:before { border-left: 40px solid transparent; left: -40px; } .ship_02:after { border-right: 40px solid transparent; right: -40px; } .ship_03 { width: 0; height: 0; border-right: 90px solid transparent; border-bottom: 280px solid #ff5d; position: absolute; left: 300px; top: 20px; } .ship_03:before { content: ""; width: 0px; height: 0px; border-right: 90px solid transparent; border-bottom: 25px solid #0cc; position: absolute; top: 255px; } @keyframes boat { 0% { left: 0%; } 100% { left: 90%; } } @-webkit-keyframes boat { 0% { left: 0%; } 100% { left: 90%; } }