我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛”

夏日

碧波荡漾的大海让人沉醉，这是海的魅力是我们内心对大海的向往。

码上掘金

代码分离

这是一个很简单的小Demo，相信大家看一下代码马上就能写出来，这里给大家安逸下我使用的svg海浪海浪生成器，随机生成样式不同的海浪，进行组合。

1653290609(1).jpg

如果不喜欢上面一种单一的海浪，还有一个多层海浪生成器，这个是自带了样式的，用来做海浪更合适，更加丝滑，效果更棒，大家可以自己实现看看。
html代码特简单就一个太阳一个浪，即可。
接下来就是使用css 控制如何展示，动画效果，浪花位于整个世界的最下方，并且每次上下浮动30像素

.waves {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.waves > svg {
    position: absolute;
    width: 100%;
    opacity: var(--opacity);
    animation: wave infinite alternate 3s;
    transition: all 3s;
}

@keyframes wave {
    0% {
        bottom: 0;
    }
    100% {
        bottom: -30px;
    }
}

太阳每秒放大0.5倍，并渐渐隐藏。

.sun, .sun1 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
    border-radius: 50%;
    position: absolute;
    left: 100px;
    top: 100px;
    opacity: 1;
}

.sun1 {
    left: 0;
    top: 0;
    animation: sun 1.5s infinite;
    transition: all 1s;
}

@keyframes sun {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
        opacity: 0.1;
    }
}

JS代码控制每个海浪的运动时间与每次运动的透明度，达到渐层的效果,这里主要使用了JS操作dom元素，改变元素的样式属性，达到控制效果。

getRandom()
setInterval(() => {
  getRandom()
}, 3000)

function getRandom() {
  document.querySelectorAll('svg').forEach(item => {
    let opacityNum = Math.random(), animationTime = Math.random() * (3 - 3 + 1) + 3
    item.style.setProperty('animation-duration', `${animationTime}s`)
    item.style.setProperty('opacity', opacityNum)
  })
}

总结

这是一篇没有见过大海，没有吹过海风，也没有被海浪拍打的内陆人想象中的大海，用时半小时，只为熟悉一下动画操作。

你喜欢大海，我爱过你

夏日

码上掘金

代码分离

总结