分享更有价值
被信任是一种快乐

怎么用css实现动态弧形线条长短变化的Loading动画

文章页正文上

本篇内容介绍了“怎么用css实现动态弧形线条长短变化的Loading动画”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!有群友问我,使用 CSS 如何实现如下 Loading 效果:这是一个非常有意思的问题。我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果:动画如下:与要求的线条 loading 动画相比,上述动画缺少了比较核心的一点在于:线条在旋转运动的过程中,长短是会发生变化的所以,这里的的难点也就转变为了,如何动态的实现弧形线段的长短变化?解决了这个问题,也就基本上解决了上述的线条变换 Loading 动画。本文将介绍 CSS 当中,几种有意思的,可能可以动态改变弧形线条长短的方式:第一种方法,也是比较容易想到的方式,使用遮罩的方式实现。我们实现两个半圆线条,一个是实际能看到的颜色,另外一个则是和背景色相同的,相对更为粗一点的半圆线条,当两条线条运动的速率不一致时,我们从视觉上,也就能看到动态变化的弧形线条。看看示意图,一看就懂:我们把上述红色线条,替换成背景白色,整体的动画效果就非常的相似了,伪代码如下:核心就是实现两条半圆线条,一条黑色,一条背景色,两段线条以不同的速率运动(通过动画时间及缓动控制),效果如下:完整的代码你可以猛击 — CodePen Demo – Linear Loadinghttps://codepen.io/Chokcoco/pen/PvqYNJ上述方案最大的 2 个问题在于:如果背景色不是纯色,会露馅如果要求能展现的线段长度大于半个圆,无法完成基于此,我们只能另辟蹊径。在之前非常多的篇文章中,都有讲到过在 CSS 配合 SVG,我们可以实现各种简单或复杂的线条动画,像是简单的:或者自定义复杂路径的复杂的线条动画:> 对 CSS/SVG 实现线条动画感兴趣的,但是还不太了解的,可以看看我的这篇文章 — 【Web动画】SVG 线条动画入门在这里,我们只需要一个简单的 SVG 标签 ,配合其 CSS 样式 stroke-dasharraystroke-dashoffset 即可轻松完成上述效果:简单解释下:stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;stroke-dashoffset:dash 模式到路径开始的距离。我们利用 stroke-dasharray 将原本完整的线条切割成多段,假设是 stroke-dasharray: 10, 10 表示这样一个图形:第一个 10 表示线段的长度,第二个 10 表示两条可见的线段中间的空隙。而实际代码中的 stroke-dasharray: 1, 200,表示在两条 1px 的线段中间,间隔 200px,由于直径 40px 的圆的周长为 40 * ≈ 125.6px,小于 200,所以实际如图下,只有一个点:同理,stroke-dasharray: 89, 200 表示:通过 animation,让线段在这两种状态之间补间变换。而 stroke-dashoffset 的作用则是将线段向前推移,配合父容器的 transform: rotate() 旋转动画,使得视觉效果,线段是在一直在向一个方向旋转。结果如下:完整的代码你可以戳这里:CodePen Demo — Linear loadinghttps://codepen.io/Chokcoco/pen/jOGQGJP?editors=1100OK,还会有同学说了,我不想引入 SVG 标签,我只想使用纯 CSS 方案。这里,还有一种利用 CSS @property 的纯 CSS 方案。这里我们需要借助 CSS @property 的能力,使得本来无法实现动画效果的角向渐变,动起来。正常来说,渐变是无法进行动画免费云主机、域名效果的,如下所示:将会得到这样一种效果,由于 conic-gradient 是不支持过渡动画的,得到的是一帧向另外一帧的直接变化:好,使用 CSS @property 自定义变量改造一下:看看改造后的效果:在这里,我们可以让渐变动态的动起来,赋予了动画的能力。我们只需要再引入 mask,将中间部分裁切掉,即可实现上述线条 Loading 动画,伪代码如下:这里,我顺便加上了 filter: hue-rotate(),让线条在旋转的同时,颜色也跟着变化,最终效果如下,这是一个纯 CSS 解决方案:
“怎么用css实现动态弧形线条长短变化的Loading动画”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!

相关推荐: 怎么提高浏览器渲染页面速度

本篇内容主要讲解“怎么提高浏览器渲染页面速度”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么提高浏览器渲染页面速度”吧!一,写出高效的css代码首先弄清浏览器解析html代码的过程:构建一个dom树,页面要显示的…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册