css海浪动画代码,不行一行代码，纯css实现海浪动态效果！

直入主题：首先画一个简单的盒子:

利用::before与::after画两个圆角值(radius)不同的不规则圆形:

父元素设置overflow: hidden

最后加上animation动画让两个不规则圆形旋转起来即可

代码

html

scss// 简单的盒子

.wave {

position: relative;

width: 150px;

height: 150px;

background-color: #5291e0;

overflow: hidden;

// 两个不规则圆形(相对盒子进行定位，距离底部距离则为波浪高度)

&::before,

&::after {

content: "";

position: absolute;

left: 50%;

bottom: 15%;

width: 500%;

height: 500%;

border-radius: 45%;

background-color: #fff;

transform: translateX(-50%); // 居中

animation: rotate 15s linear infinite;

}web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

// 其中一个不规则圆形调整一下样式，以便区分(或者调整animation的参数来区分)

&::before {

bottom: 10%;

opacity: .5;

border-radius: 47%;

}

// 旋转动画

@keyframes rotate {

from {

transform: translateX(-50%) rotateZ(0deg);

}

to {

transform: translateX(-50%) rotateZ(360deg);

}

)

总结

效果图第一眼看上去，让"蓝色"部分动起来，真的很难，所以采用逆向思维，直接操控"白色"部分再来个overflow: hidden成功偷梁换柱，舒服得很。

css海浪动画代码,不行一行代码，纯css实现海浪动态效果！相关推荐

html图片动态效果编码,CSS 图片动画特效的示例代码（相框）
本文介绍了CSS 图片动画特效的示例代码(相框),分享给大家,具体如下: 下面是效果图 HTML代码 Rabbit Web Developer CSS代码 /* 初始化 */ body, html { ...
网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...
css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个人独自行走的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...
【动画消消乐】纯CSS加载/过渡动画学习笔记合集（1-50）
Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍一下 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入 ...
用python画爱心的代码-Python一行代码画个爱心案例
昨天六一儿童节,大小朋友都过节了,真好!"人生易老天难老",这很现实,读这句诗不期然就有一种沧桑的感觉.而要人生幸福,是需要保持一颗童心的.<三字经>开篇说" ...
http代码_一行代码就可以实现HTTP文件服务器，他为什么写了150行？
互联网已经发展了20多年,web技术早已经不是什么新消息,现在更多的程序员讨论的都是web框架,技术框架,高可用框架等.在框架的背后,其实还是要了解最底层的核心内容,比如TCP/IP协议怎么回事,HT ...
css 示例_灵感：CodePen上纯CSS动画的10个示例
css 示例我们的移动浏览器在向我们展示令人惊叹,精美的动画方面不断变得越来越强大,越来越出色. 当与CSS的布局功能结合使用时,就可以完全不使用任何图像来创建一些精美的作品. 结果是可伸缩的,快速 ...
python只能用一行代码_Python 一行代码能实现丧心病狂的功能
手头有 109 张头部 CT 的断层扫描图片,我打算用这些图片尝试头部的三维重建.基础工作之一,就是要把这些图片数据读出来,组织成一个三维的数据结构(实际上是四维的,因为每个像素有 RGBA 四个通道 ...
【CSS特效扫盲】精选40种纯CSS特效应用实例，肝了10个晚上整理纯CSS特效（上）（附源码下载）
[写在前面]其实有时候经常会在某一天用到某种特效,然后就去网上找demo,千篇一律的CSS特效代码不说,更多的是滥竽充数,而且还没有特效预览图,因此针对我之前整理的CSS特效在这里做一个总结,希望给你 ...

css海浪动画代码,不行一行代码，纯css实现海浪动态效果！

css海浪动画代码,不行一行代码，纯css实现海浪动态效果！相关推荐

最新文章

热门文章