使用CSS3实现海浪波浪动态效果的代码

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS代码 CSS3动画 CSS3教程

要实现CSS3海浪波浪动态效果，可以使用`@keyframes`动画和`transform`属性。首先，创建一个名为`wave`的关键帧动画，设置动画的持续时间、波峰高度和波长。然后，使用`animation`属性将动画应用到需要添加波浪效果的元素上。最后，通过调整元素的`transform`属性，如`translateX()`和`scaleY()`，来实现波浪的上下移动和放大缩小效果。以下是一个简单的示例代码： ```css @keyframes wave { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(10px) scaleY(0.8); } 100% { transform: translateX(20px) scaleY(1); } } .wave { animation

HTML代码

建立一个div，id为wavesDIV，之后使用SVG绘制一个图形出来，此时这个图形还是不会懂的，我们需要使用animation来让他动起来

<divid="wavesDIV"style="display:block;"><svgclass="waves"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="02415028"preserveAspectRatio="none"shape-rendering="auto"><defs><pathid="gentle-wave"d="M-16044c30058-1888-18s5818881858-1888-1858188818v44h-352z"></path></defs><gclass="parallax"><usexlink:href="#gentle-wave"x="48"y="-2"fill="rgba(125,165,191,0.3)"></use><usexlink:href="#gentle-wave"x="48"y="3"fill="rgba(125,165,191,0.5)"></use><usexlink:href="#gentle-wave"x="48"y="5"fill="rgba(125,165,191,0.7)"></use><usexlink:href="#gentle-wave"x="48"y="12"fill="rgba(125,165,191,1)"></use></g></svg></div>

CSS代码

使用@keyframes设定动画，使用animation调用

#wavesDIV{position:fixed;bottom:0;width:100%;display:block;height:20vh;background-color:rgb(125,165,191);animation:move-out2scubic-bezier(0,.98,.97,1)forwards;}.waves{position:relative;width:100%;height:15vh;margin-top:-15vh;min-height:100px;max-height:150px;}.parallax>use{animation:move-forever25scubic-bezier(.55,.5,.45,.5)infinite;}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s;}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s;}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s;}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s;}@keyframesmove-forever{0%{transform:translate3d(-90px,0,0);}100%{transform:translate3d(85px,0,0);}}@keyframesmove-out{0%{transform:translateY(400%);}100%{transform:translateY(0%);}}home.php?mod=space&uid=945662(max-width:768px){.waves{height:40px;min-height:40px;}}

当然如果在中间加多点，譬如说10%,20%,30%,40%,50%,60%，动态会更强烈

相关专题