直播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 0 0 0 1 0 0 0 0 0 20 -10 " /> <!-- values=" R G B A 1 1 0 0 0 0 R = 1*R + 0*G + 0*B + 0*A + 0 0 1 0 0 0 G = 0*R + 1*G + 0*B + 0*A + 0 0 0 1 0 0 B = 0*R + 0*G + 1*B + 0*A + 0 0 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液体实现加载动画的相关代码, 更多内容欢迎关注之后的文章