直播app系统源码通过CSS液体实现加载动画

直播app系统源码通过CSS液体实现加载动画
首先我们要让元素能够旋转起来，可以使用transform中的rotate进行2D的360deg旋转。
紧接着我们可以通过CSS变量（–开头的形式）结合animation-delay来控制每个元素的动画从何时开始。
最后为了让整个旋转的元素能够呈现流体形，我们需要使用filter滤镜来特殊处理一下，这里涉及到一些复杂的颜色处理，建议直接上svg的 feColorMatrix，这也是过滤的一种类型，使用矩阵来影响颜色的通道（rgba）。

HTML

//HTML
<body><div class="loading"><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属性顶一个滤镜的唯一名称，feGaussianBlur 定义模糊效果，in="SourceGraphic"这个部分定义了由整个图像创建效果，stdDeviation属性定义模糊量--><filter id="gooey"><feGaussianBlur in="SourceGraphic" stdDeviation="10" /><!-- feColorMatrix 用于彩色滤光片转换 --><feColorMatrix values="1 0 0 0 0 0 1 0 0 00 0 1 0 0 0 0 0 20 -10" /><!-- values="R G B A 11 0 0 0 0  R = 1*R + 0*G + 0*B + 0*A + 00 1 0 0 0  G = 0*R + 1*G + 0*B + 0*A + 00 0 1 0 0  B = 0*R + 0*G + 1*B + 0*A + 00 0 0 20 -10  A = 0*R + 0*G + 0*B + 1*A + 0"  --></filter></svg>
</body>

CSS

//CSS
* {margin: 0;padding: 0;
}body {display: flex;min-height: 100vh;overflow: hidden;justify-content: center;align-items: center;background: #010b10;
}svg {width: 0;height: 0;
}.loading {width: 200px;height: 200px;position: relative;filter: url(#gooey);
}.loading span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;animation: loading 4s ease-in-out infinite;/* var函数用来插入css变量的值，css变量名称以--开头 */animation-delay: calc(0.2s * var(--i));
}.loading span::before {content: '';position: absolute;top: 0;left: calc(50% - 20px);width: 40px;height: 40px;background: linear-gradient(#fce4ec, #03a9f4);border-radius: 50%;box-shadow: 0 0 30px #03a9f4;
}@keyframes loading {0% {transform: rotate(0deg);}50%,100% {transform: rotate(360deg);}
}

以上就是直播app系统源码通过CSS液体实现加载动画的相关代码，更多内容欢迎关注之后的文章

直播app系统源码通过CSS液体实现加载动画相关推荐

在直播APP系统源码中基于腾讯视频云SDK制作简易版直播回放播放器
在直播App系统中,当主播结束之后,我们需要使用播放器观看直播的一些回放片段,在观看回放的过程中,我们会使用到开始,暂停,控制播放位置,进度监听,全屏等功能,然而腾讯点播并没有提供这些简单的控制功能, ...
（H5+安卓+ios）直播app系统源码,直播商城带货源码,方维直播app系统,直播短视频源码
商品介绍 (H5+安卓+ios)直播app系统源码,直播商城带货源码,方维直播app系统,直播短视频源码,本系统有三个版本:带商城直播系统,带H5直播系统,和一般的直播短视频系统,默认带H5版本系统 ...
直播短视频带货完美运营APP源码购物直播交友系统源码
介绍: 别人互换得来的,没有具体搭建研究,源码附带安卓跟苹果APP源码,没有教程跟安装文档,没技术得就别看了无售后,需要自行研究,大概看了下好像是云豹二开得版本. 软件简介介绍: 直播带货APP系统源 ...
直播商城系统源码，播放器aliPlayer自定义清晰度切换
直播商城系统源码,播放器aliPlayer自定义清晰度切换 <!DOCTYPE html> <html><head><meta charset="u ...
新版金色UI萝卜影视APP系统源码+Java原生开发
正文: 新版金色UI萝卜影视APP系统源码+Java原生开发,当前这个版本,可以说这是目前以来很牛的一款源码,无论是流畅度,还是原生稳定性都是非常稳定的. 环境:Android Studio,纯Jav ...
开源PHP社区交友APP系统源码/傻瓜式搭建
开源PHP社区交友APP系统源码/傻瓜式搭建 ☑️ 编号:ym228 ☑️ 品牌:PHP ☑️ 语言:PHP ☑️ 大小:132MB ☑️ 类型:APP系统源码 ☑️ 支持:APP
物业员工APP系统源码
物业员工APP系统源码系统功能介绍一.报修管理在线派单抢单: 移动完成整个报修处理流程: 二.移动收费物业人员移动收费: 支持多种收费方式: 三.巡更巡检支持社区日常巡查.设备巡检: 自动生 ...
加载html动画logo,仅CSS实现的加载动画 – Loader.css
仅CSS实现的加载动画 – Loader.css 4月 13, 2015 评论 (6) Sponsor 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loadi ...
纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一.效果图二.步骤 1.html部分 2.css部分前言纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...

直播app系统源码通过CSS液体实现加载动画

直播app系统源码通过CSS液体实现加载动画相关推荐

最新文章

热门文章