使用css实现水波加载动画效果

csdn   发布时间:2023-04-23 16:03:53   作者:北极光之夜。   我要评论
这篇文章主要介绍了使用css实现水波加载动画效果,技术上只用到了css+html,还是非常容易学习的,做出来的效果也很不错,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

先看效果:

原理:

原理是比较简单的,大致上就是有一个背景色为蓝色的圆形;然后圆形上面有一个或两个有弧度的白色方形盒子在旋转,通过白色遮住蓝色形成像是波浪的视差。

实现:

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水波加载动画内容请搜索程序员之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持程序员之家!

相关文章

  • CSS3.0和CSS2.0的区别有哪些

    CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式,由于CSS2的大量普及应用,逐渐的从CSS2开始大家就简称为CSS,那么CSS3.0和CSS2.0有什么区别
    2023-04-18
  • CSS+JS实现动态翻书效果

    本文主要介绍了CSS+JS实现动态翻书效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-17
  • CSS中height:100vh和height:100%的区别

    本文主要介绍了CSS中height:100vh和height:100%的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2023-04-06
  • 通过HTML+CSS实现折叠样式完整代码

    这篇文章主要介绍了通过HTML+CSS实现折叠样式完整代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-03
  • CSS实现鼠标悬停svg图标描边效果

    这篇文章主要介绍了CSS实现鼠标悬停svg图标描边效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-30
  • 纯CSS实现了下划线的交互动画效果

    本文主要介绍了纯CSS实现了下划线的交互动画效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2023-03-06
  • CSS 实现块级元素靠右的方法

    想要块级元素居右往往设置 margin-right: 0 属性是行不通的,下面介绍五种方法,不同场景适用不同方法,感兴趣的朋友跟随小编一起看看吧
    2023-03-06
  • 纯CSS实现鼠标悬停图片上升显示描述案例

    当我们想在图片上面放置一些文字内容时,发现不管怎么放置,要么就是图片影响到文字的观感,要么就是文字挡住图片的细节,那么怎么可以既看到图片的细节又可以看到对图片的
    2023-03-01
  • 基于css实现炫酷按钮动画效果案例代码

    按钮在开发中使用的频率非常的高,ui 框架中的按钮组件也都是层出不穷,今天教大家仅用 css 实现一些非常炫酷的按钮效果,感兴趣的朋友跟随小编一起学习吧
    2023-02-28
  • CSS 弹性布局Flex详细讲解(Flex 属性详解、场景分析)

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,这篇文章主要介绍了Css 弹性布局Flex详细介绍(Flex 属性详解、场景分析),需要
    2023-02-28

最新评论

?


http://www.vxiaotou.com