色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3小船水面行駛

劉姿婷2年前10瀏覽0評論

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小船水面行駛效果。