纯CSS实现波浪移动效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了纯CSS实现波浪移动效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2413字，纯文字阅读大概需要4分钟。

内容图文

在某些页面上常常看到波浪的效果，虽然只有装饰的作用，但是却让页面看上去更生动了，同时某些情况下也能起到进度条的作用，而波浪的形式却比普通进度条更美观有趣。

如果想要实现波浪的效果，作者想到的第一个方法是通过 canvas 绘制波浪，然后用帧动画让波浪运动起来。这种方式实现的波浪效果应该是最好的，能够实现很多细节，比如控制波峰的高度、改变波浪的数量、根据前一个波浪的高度计算后一个波浪的高度等等。

但是往往需求并不会这么复杂，产品经理和设计想要的只是一个看上去还比较美观的波浪效果而已。如果用 canvas 去做，就实在是大材小用了，耗时耗力。所以这种情况下，就可以尝试使用 css 来完成这个小需求。

分析波浪效果

上面是作者完成的波浪效果的其中一种（不会做 gif，就用多张图片拼贴在一起代替吧），它有两个波峰，这两个波峰动起来时，会有一种向右推进的效果。我们先一个一个来看，如果要实现一个波峰，我们应该怎么做？

波峰具有弧度，在 css 中能够实现弧度效果的是border-raduis这个属性；而对于向右推进的效果，单个来看的话，其实可以理解为是旋转动画，我们可以通过animation来实现。

// html
<p class="wave"></p>

// style
.wave {
    width: 300px;
    height: 300px;
    border-raduis: 50%;
    background: blue;
}

上面代码中的.wave在页面上的显示效果是一个圆形。虽然还没有添加动画，但是我们已经可以预想到，即使旋转起来，我们视觉上看来并没有在运动。这要怎么解决呢？其实很简单，只要让每一个角的弧度都不同就行了。同时，让宽高不同，可以使绘制出来的效果更好。

.wave {
    width: 250px;
    height: 300px;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 140px;
    background: #adcbfe;
}

然后通过动画使这个不规则的形状动起来。

.wave {
    width: 250px;
    height: 300px;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 140px;
    background: #adcbfe;
    animation: wave 4s linear infinite;
}

@keyframes wave {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

关于 css 动画的使用，可以参考之前的一篇文章：

纯CSS实现轮播图效果

到这里，一个波浪的实现就完成了。第二个波浪的实现步骤和第一个是相同的，但是可以对width height border-raduis animation 这些属性进行修改，使两个波浪的运动节奏不同，有快有慢有高有低，这样波浪的效果就会更真实。

相关推荐：

HTML5实现眼睛移动效果的示例

JS控制对象移动效果_javascript技巧

JavaScript如何实现组合列表框中元素移动效果_javascript技巧

以上就是纯CSS实现波浪移动效果的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的纯CSS实现波浪移动效果全部内容，希望文章能够帮你解决纯CSS实现波浪移动效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端