类似液体loading效果-程序员宅基地

技术标签： CSS

直接上代码，有注释
index.html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水波纹loading</title>
    <style>
        html {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            /*这三句让弹性盒子内容绝对居中*/
            display: flex;
            justify-content: center;
            align-items: center;

            height: 100vh;
            background-color: #222;
        }

        /*不让svg占据盒子空间*/
        svg {
            width: 0;
            height: 0;
        }

        .loader {
            position: relative;
            /*border: 1px solid silver;*/
            width: 200px;
            height: 200px;
            /*URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
            这里是 filter: url(svg-url#element-id)*/
            filter: url(#gooey);
        }

        .loader > span {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*background-color: #fff;*/
            animation: loader 4s ease-in-out infinite;
            /*动画延时：这里给calc计算属性，每个span延时*/
            animation-delay: calc(0.2s * var(--i));
        }

        .loader > span:before {
            content: '';
            position: absolute;
            display: block;
            top: 0;
            width: 40px;
            height: 40px;
            /*这两句让元素水平居中*/
            left: 50%;
            transform: translateX(-50%);
            /*圆*/
            border-radius: 50%;
            box-shadow: 0 0 30px #03a9f4;
            background-image: linear-gradient(#fce4ec, #03a9f4);
        }
        /*所有的span盒子进行该动画*/
        @keyframes loader {
            0% {
                transform: rotate(0deg);
            }
            50%, 100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
<div class="loader">
    <span style="--i:1"></span>
    <span style="--i:2"></span>
    <span style="--i:3"></span>
    <span style="--i:4"></span>
    <span style="--i:5"></span>
    <span style="--i:6"></span>
    <span style="--i:7"></span>
</div>
<svg>
    <filter id="gooey">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
        <feColorMatrix values="1 0 0 0 0
                               0 1 0 0 0
                               0 0 1 0 0
                               0 0 0 20 -10">
        </feColorMatrix>
    </filter>
</svg>
</body>
</html>

效果图
在这里插入图片描述

本文链接：https://blog.csdn.net/qq_42031498/article/details/106254034

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

MATLAB+GUI：手动修改曲线中的点_matlab如何将一条曲线的数据稍微修改一点-程序员宅基地

文章浏览阅读6.6k次，点赞5次，收藏31次。本文目的：手动修改已知曲线中的点功能： 1、可以放缩图像，进行数据点的修改 2、可以选定数据点，并进行修改 3、数据点的修改不能超出相邻点的范围 4、可以移动坐标轴和图像，以方便观察整体图像 5、可以保存修改后的数据由于不仅需要代码，还需要fig和数据等，可以私信索取。function varargout = movePoints(va..._matlab如何将一条曲线的数据稍微修改一点

termux无法安装引导程序包_安卓手机上安装termux，把手机当linux服务器用-程序员宅基地

文章浏览阅读3.0k次。旧的安卓手机不要扔，可以拿来做一个微型的linux服务器，编程开发，跑服务都不在话下！本文就以6年前发布的小米2s为例，亲自带大家一起体验一下这种手机服务器并简单分析其中的一些原理。一、升级最新安卓操作系统像小米2s这样已经发布6年多的手机，配置已经不够用了。但是我们知道，谷歌每年发布的新安卓系统版本都有性能的优化，所以旧手机如果能升级系统，自然也能改善性能。工欲善其事必先利其器，我们先把旧手机升..._termux引导程序包

RocketMQ生产部署-程序员宅基地

文章浏览阅读335次。本文英文原文来自RocketMQ官方部署文档文章目录前提准生产环境部署命名服务代理服务配置代理服务配置命令行管理工具如何访问如何使用复制模式复制：同步/异步代理服务如何配置部署本章节介绍了准生产环境部署方案。综合来讲，我们要部署一套弹性伸缩并且没有单点故障的RocketMQ集群。前提开始本章之前，你需要先了解过快速开始，并且熟悉RocketMQ的组件和核心概念。准生产环境部署命名..._rocketmq生产部署

通过矩形的中心坐标与原顶点坐标以及旋转角度计算矩形的旋转后4个顶点的位置...-程序员宅基地

文章浏览阅读4.9k次。x2 = cos(q)(x1-x0) – sin(q)(y1-y0) + x0;y2 = sin(q)(x1-x0) + cos(q)(y1-y0) + y0;其中，q表示矩形的旋转角度，x1表示矩形的原顶点横坐标，x0表示矩形的中心坐标转载于:https://www.cnblogs.com/greystone/p/10115293.html..._c++长方形旋转求顶点坐标

springboot-shiro中的问题_shiro cachingenabled-程序员宅基地

文章浏览阅读1.3k次，点赞2次，收藏2次。assertCredentialsMatch_shiro cachingenabled

如何修复注册表！-程序员宅基地

文章浏览阅读2.7k次，点赞2次，收藏5次。注册表修复 Windows 95开始，微软公司在Windows中引入了注册表（英文为REGISTRY）的概念（实际上原来在Windows NT中已经有此概念）。注册表是Windows95及Windows98的核心数据库，表中存放着各种参数，直接控制着Windows的启动、硬件驱动程序的装载以及一些 Windows应用程..._无法导入 \hkey_dyn_data.reg: 访问注册表时出错。

随便推点

符号扩展，零扩展与符号缩减-程序员宅基地

文章浏览阅读1.6w次，点赞23次，收藏101次。1. 符号位扩展，零扩展，符号位缩减1.1 符号位扩展高级程序设计语言允许程序员使用包含不同大小整数的对象表达式。那么，当一个表达式的两个操作数大小不同时，有些语言会报错，有些语言则会自动将操作数转换成一个统一的格式。这种转换是有代价的，因此如果你不希望编译器在你不知情的情况下自动加入各种转换到原本非常完美的代码中，你就需要掌握编译器如何处理这些表达式。以-64为例，其8位的二进制补码（1100 0_符号扩展

【引用】DMA内存申请--dma_alloc_coherent_dma引用-程序员宅基地

文章浏览阅读2.8k次。在项目驱动过程中会经常用到dma传输数据，而dma需要的内存有自己的特点，一般认为需要物理地址连续，并且内存是不可cache的，在linux内核中提供一个供dma所需内存的申请函数dma_alloc_coheren. 如下所述：dma_alloc_coherent()dma_alloc_coherent() -- 获取物理页，并将该物理页的总线地址保存于dma_handle，返回该物理页的虚拟地址_dma引用

JAVA—— Linux（二）_java llinux-程序员宅基地

文章浏览阅读1.1k次。文章目录1 Linux文件管理1.1 touch命令1.2 vi与vim命令1.2.1 vi/vim介绍1.2.2 vi/vim模式1.2.3 打开和新建文件1.2.4 三种模式切换1.2.5 文件查看**1) cat命令**2) grep命令3) tail命令4）less命令1.2.6 vim定位行**1.2.7 异常处理**1.2.8 操作扩展1.3 echo 命令第二步: 将**命令的成功结果** **追加** 指定文件的后面第三步: 将**命令的失败结果** **追加** 指定文件的后面1.4 _java llinux