使用css实现水波加载动画效果
csdn 发布时间：2023-04-23 16:03:53 作者：北极光之夜。 
我要评论
我要评论这篇文章主要介绍了使用css实现水波加载动画效果,技术上只用到了css+html，还是非常容易学习的，做出来的效果也很不错,需要的朋友可以参考下
先看效果：
原理：
原理是比较简单的，大致上就是有一个背景色为蓝色的圆形；然后圆形上面有一个或两个有弧度的白色方形盒子在旋转，通过白色遮住蓝色形成像是波浪的视差。
实现：
1.定义两盒子，quan就是那个圆形，shui就是圆里蓝色的背景；
<div class="quan">
<div class="shui"></div>
</div>
2.基本样式，这样大致上就是得到一个蓝色背景的圆，细节就不说了自己看看就行~
.quan{
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
border: 3px solid rgb(246, 247, 248);
box-shadow: 0 0 0 3px rgb(41, 134, 196);
}
.shui{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(23, 106, 201);
border-radius: 50%;
overflow: hidden;
}
3.定义伪类，就是要旋转的有角度的盒子：
.shui::after{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 150%;
height: 150%;
border-radius: 40%;
background-color: rgb(240, 228, 228);
animation: shi 5s linear infinite;
}
4.实现，把白色盒子偏移到能覆盖圆上半部分，然后让它一直转：
@keyframes shi{
0%{
transform: translate(-50%,-65%) rotate(0deg);
}
100%{
transform: translate(-50%,-65%) rotate(360deg);
}
}
5.同上，再来一个白色盒子，不过背景色要设置透明度别覆盖掉了上一个：
.shui::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 150%;
height: 150%;
border-radius: 42%;
background-color: rgb(240, 228, 228,0.2);
animation: xu 7s linear infinite;
}
@keyframes xu{
0%{
transform: translate(-50%,-60%) rotate(0deg);
}
100%{
transform: translate(-50%,-60%) rotate(360deg);
}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(240, 228, 228);
}
.quan{
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
border: 3px solid rgb(246, 247, 248);
box-shadow: 0 0 0 3px rgb(41, 134, 196);
}
.shui{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(23, 106, 201);
border-radius: 50%;
overflow: hidden;
}
.shui::after{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 150%;
height: 150%;
border-radius: 40%;
background-color: rgb(240, 228, 228);
animation: shi 5s linear infinite;
}
@keyframes shi{
0%{
transform: translate(-50%,-65%) rotate(0deg);
}
100%{
transform: translate(-50%,-65%) rotate(360deg);
}
}
.shui::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 150%;
height: 150%;
border-radius: 42%;
background-color: rgb(240, 228, 228,0.2);
animation: xu 7s linear infinite;
}
@keyframes xu{
0%{
transform: translate(-50%,-60%) rotate(0deg);
}
100%{
transform: translate(-50%,-60%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="quan">
<div class="shui"></div>
</div>
</body>
</html>
到此这篇关于使用css实现水波加载动画效果的文章就介绍到这了,更多相关css水波加载动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式，由于CSS2的大量普及应用，逐渐的从CSS2开始大家就简称为CSS，那么CSS3.0和CSS2.0有什么区别2023-04-18
本文主要介绍了CSS+JS实现动态翻书效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-17
CSS中height:100vh和height:100%的区别
本文主要介绍了CSS中height:100vh和height:100%的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2023-04-06
这篇文章主要介绍了通过HTML+CSS实现折叠样式完整代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-03
这篇文章主要介绍了CSS实现鼠标悬停svg图标描边效果,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-30
本文主要介绍了纯CSS实现了下划线的交互动画效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2023-03-06- 想要块级元素居右往往设置 margin-right: 0 属性是行不通的，下面介绍五种方法，不同场景适用不同方法，感兴趣的朋友跟随小编一起看看吧2023-03-06
当我们想在图片上面放置一些文字内容时，发现不管怎么放置，要么就是图片影响到文字的观感，要么就是文字挡住图片的细节，那么怎么可以既看到图片的细节又可以看到对图片的2023-03-01
按钮在开发中使用的频率非常的高，ui 框架中的按钮组件也都是层出不穷，今天教大家仅用 css 实现一些非常炫酷的按钮效果，感兴趣的朋友跟随小编一起学习吧2023-02-28
CSS 弹性布局Flex详细讲解(Flex 属性详解、场景分析)
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，这篇文章主要介绍了Css 弹性布局Flex详细介绍(Flex 属性详解、场景分析),需要2023-02-28
最新评论