Bagaimana untuk menggunakan CSS untuk melaksanakan animasi pemuatan baris dinamik? Artikel berikut memperkenalkan tiga kaedah menggunakan CSS untuk melaksanakan animasi pemuatan yang mengubah panjang garisan arka dinamik. Saya harap ia akan membantu semua orang.
Sekumpulan rakan bertanya kepada saya cara menggunakan CSS untuk mencapai kesan Pemuatan berikut:
Ini adalah satu soalan yang sangat menarik.
Kami tahu bahawa menggunakan CSS, kami boleh mencapai kesan animasi sedemikian dengan mudah:
<div></div>
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid transparent;
border-top: 2px solid #000;
border-left: 2px solid #000;
animation: rotate 3s infinite linear;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}Animasi adalah seperti berikut:
Berbanding dengan animasi pemuatan baris yang diperlukan, animasi di atas tidak mempunyai titik teras:
Jadi, kesukaran di sini menjadi, bagaimana untuk merealisasikan perubahan panjang segmen arka secara dinamik? Menyelesaikan masalah ini pada asasnya menyelesaikan transformasi baris yang disebutkan di atas Memuatkan animasi.
Artikel ini akan memperkenalkan beberapa cara menarik dalam CSS yang mungkin mengubah panjang garisan lengkok secara dinamik:
Kaedah pertama Kaedah, yang juga lebih mudah untuk difikirkan, ialah menggunakan masking.
Kami melaksanakan dua garisan separuh bulatan, satu adalah warna sebenar yang boleh dilihat, satu lagi sama dengan warna latar belakang, garis separuh bulatan yang agak tebal, apabila dua Apabila kelajuan pergerakan garisan tidak konsisten, kita boleh melihat garisan lengkok yang berubah secara dinamik.
Lihat gambarajah skematik dan anda akan faham sepintas lalu:
Kami menggantikan garis merah di atas dengan latar belakang putih, dan kesan animasi keseluruhan akan menjadi sangat serupa , kod pseudo adalah seperti berikut:
<div></div>
div {
width: 200px;
height: 200px;
}
div::before {
position: absolute;
content: "";
top: 0px; left: 0px; right: 0px; bottom: 0px;
border-radius: 50%;
border: 3px solid transparent;
border-top: 3px solid #000;
border-left: 3px solid #000;
animation: rotate 3s infinite ease-out;
}
div::after {
position: absolute;
content: "";
top: -2px; left: -2px; right: -2px; bottom: -2px;
border-radius: 50%;
border: 7px solid transparent;
border-bottom: 7px solid #fff;
border-right: 7px solid #fff;
animation: rotate 4s infinite ease-in-out;
}
@keyframes rotate {
100% {
transform: rotate(0deg);
}
}Intinya adalah untuk melaksanakan dua garisan separuh bulatan, satu hitam, satu warna latar belakang dan dua garisan bergerak pada kadar yang berbeza ( dikawal oleh masa animasi dan pelonggaran), Kesannya adalah seperti berikut:
Untuk kod lengkap anda boleh klik-- CodePen Demo - Linear Loading
https://codepen.io/Chokcoco /pen/PvqYNJ
Dua masalah terbesar dengan penyelesaian di atas ialah:
Jika warna latar belakang bukan warna pepejal, rahsia akan terbongkar
Jika panjang segmen garisan yang perlu dipamerkan lebih daripada separuh bulatan, ia tidak boleh diselesaikan
Berdasarkan ini, kami hanya boleh mencari jalan lain.
Dalam banyak artikel sebelum ini, kami telah menyebut bahawa menggunakan CSS dengan SVG, kami boleh mencapai pelbagai animasi Line yang ringkas atau kompleks, seperti mudah:
atau animasi baris kompleks dengan laluan kompleks tersuai:
> ; SVG untuk melaksanakan animasi baris, tetapi belum tahu banyak tentangnya, anda boleh membaca artikel saya - [Animasi Web] Pengenalan kepada Animasi Baris SVG
di Sini, kami hanya memerlukan tag SVG ringkas <circle>, digabungkan dengan gaya CSSnya stroke-dasharray dan stroke-dashoffset untuk mencapai kesan di atas dengan mudah:
<svg class="circular" viewbox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" /> </svg>
.circular {
width: 100px;
height: 100px;
animation: rotate 2s linear infinite;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #000;
animation: dash 1.5s ease-in-out infinite
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}Penjelasan ringkas:
stroke: Analogi dengan warna sempadan dalam CSS, tetapkan warna sempadan untuk grafik svg stroke-dasharray: Nilai ialah tatasusunan, tanpa had atas, setiap nombor secara bergantian mewakili lebar sempang; dan ruang; stroke-dashoffset: jarak dari corak sempang ke permulaan laluan. Kami menggunakan stroke-dasharray untuk memotong baris lengkap asal kepada berbilang segmen Andaikan bahawa stroke-dasharray: 10, 10 mewakili grafik sedemikian:
Pertama. 10 pertama mewakili panjang segmen garisan, dan 10 kedua mewakili jurang antara dua segmen garisan yang boleh dilihat.
dan stroke-dasharray: 1, 200 dalam kod sebenar bermakna ia berada di antara dua 1px segmen garisan dengan selang 200px Memandangkan lilitan bulatan dengan diameter 40px ialah 40 * π ≈ 125.6px, yang mana adalah lebih kecil daripada 200 , jadi dalam rajah sebenar di bawah, hanya terdapat satu titik:
同理，stroke-dasharray: 89, 200 表示：
通过 animation，让线段在这两种状态之间补间变换。而 stroke-dashoffset 的作用则是将线段向前推移，配合父容器的 transform: rotate() 旋转动画，使得视觉效果，线段是在一直在向一个方向旋转。结果如下：
完整的代码你可以戳这里：CodePen Demo -- Linear loading
https://codepen.io/Chokcoco/pen/jOGQGJP?editors=1100
OK，还会有同学说了，我不想引入 SVG 标签，我只想使用纯 CSS 方案。这里，还有一种利用 CSS @property 的纯 CSS 方案。
这里我们需要借助 CSS @property 的能力，使得本来无法实现动画效果的角向渐变，动起来。
正常来说，渐变是无法进行动画效果的，如下所示：
<div></div>
.normal {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%);
transition: background 300ms;
&:hover {
background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%);
}
}将会得到这样一种效果，由于 conic-gradient 是不支持过渡动画的，得到的是一帧向另外一帧的直接变化：
好，使用 CSS @property 自定义变量改造一下：
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 25%;
}
div {
background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%);
transition: --per 300ms linear;
&:hover {
--per: 60%;
}
}看看改造后的效果：
在这里，我们可以让渐变动态的动起来，赋予了动画的能力。
我们只需要再引入 mask，将中间部分裁切掉，即可实现上述线条 Loading 动画，伪代码如下：
<div></div>
@property --per {
syntax: "<percentage>";
inherits: false;
initial-value: 10%;
}
div {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
animation: rotate 11s infinite ease-in-out;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: conic-gradient(transparent, transparent var(--per), #fa7 var(--per), #fa7);
mask: radial-gradient(transparent, transparent 47.5px, #000 48px, #000);
animation: change 3s infinite cubic-bezier(0.57, 0.29, 0.49, 0.76);
}
}
@keyframes change {
50% {
transform: rotate(270deg);
--per: 98%;
}
100% {
transform: rotate(720deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}这里，我顺便加上了 filter: hue-rotate()，让线条在旋转的同时，颜色也跟着变化，最终效果如下，这是一个纯 CSS 解决方案：
完整的代码你可以猛击这里：Linear Loading Animation
https://codepen.io/Chokcoco/pen/ZEXmJxP?editors=1100
本方案的唯一问题在于，当前 CSS @property 的兼容性稍微不是那么乐观。当然，未来可期。
简单总结一下，本文介绍了 3 种实现动态弧形线条长短变化的 Loading 动画，当然，它们各有优劣，实际使用的时候根据实际情况具体取舍。有的时候，切图也许也是更省时间的一种方式：）
好了，本文到此结束，希望本文对你有所帮助 :)
（学习视频分享：css视频教程）
Atas ialah kandungan terperinci Artikel menerangkan secara terperinci cara melaksanakan animasi pemuatan perubahan panjang garisan lengkok dinamik menggunakan css.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
