CSS3小船水面行駛是一個非常有趣的場景,可以將其應用于網站中,使用戶感受到舒適、平靜的感覺。要實現CSS3小船水面行駛,需要以下代碼:
.container { background-color: #B5D5ED; position: relative; height: 200px; overflow: hidden; } .ship { position: absolute; top: 80px; animation: shipMove 10s linear infinite; } @keyframes shipMove { 0% { left: -100px; transform: rotate(0deg); } 25% { left: 25%; transform: rotate(10deg); } 50% { left: 50%; transform: rotate(0deg); } 75% { left: 75%; transform: rotate(-10deg); } 100% { left: 100%; transform: rotate(0deg); } } .wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; background-image: linear-gradient(to right, #2196F3 0%, #B5D5ED 100%); background-repeat: repeat-x; animation: waveMove 1s linear infinite; transform: translate3d(0, 0, 0); } @keyframes waveMove { from { background-position-x: 0; } to { background-position-x: 60px; } }
在以上代碼中,.container是一個包含小船和海浪的容器元素,設置了高度和overflow:hidden可以隱藏海浪超出容器的部分。.ship是小船的元素,position為absolute可以讓小船在容器中絕對定位,使用了CSS3動畫animation來實現小船左右移動和上下浪動的效果。.wave是海浪的元素,設置了position、bottom、background-image等樣式可以實現海浪移動的效果。
使用以上代碼即可實現一個有趣的CSS3小船水面行駛效果。