<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circle Loading Animation</title> <link rel="stylesheet" href="loading_animation.css">...
.loading-circle-2{width:20px;height:20px;border-radius:50%;background-color:#333;margin:010px;transform:scale(0);transition: transform0.5sease0.2s; }.loading-2.loading-circle-2:nth-child(1) {animation: delay0.2slinear infinite; }.loading-2.loading-circle-2:nth-child(2) {animation: delay...
-webkit-mask: radial-gradient( closest-side circle, transparent 50%, red 51% 99%, transparent 100%); } 原理是这样的 还有一个圆角,可以直接用径向渐变实现 loading{ background: radial-gradient( closest-side circle, royalblue 99%, transparent 100%) center top/25% 25% no-repeat, conic-gradient...
1 2、CSS: 1#circle{2margin:20px auto;3width:100px;4height:100px;5border:5px white solid;6border-left-color:#ff5500;7border-right-color:#0c80fe;8border-radius:100%;9animation:loading1 1s infinite linear;10}11@keyframes loading1{12from{transform:rotate(0deg)}to{transform:rotate(360deg...
animation:circle1sinfinitelinear;-webkit-animation:circle1sinfinitelinear;/* Safari 和 Chrome */border-radius:50%}@-webkit-keyframescircle{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg)}}检测中...varsubmit=document.getElementById("submit");vartoast=document.getElementById("toast")...
比如,我如果需要改变 loading 的颜色,需要改变两个地方 image.png 很明显,这样的实现不太符合 DRY(Don't Repeat Yourself)原则。 有一个比较简单思路可以用 CSS 变量来传递 loading{--color:royalblue;background:radial-gradient(closest-sidecircle,var(--color)99%,transparent100%)centertop/25%25%no-repeat,...
animation-delay: -0.7s; } .ddr5{ animation-delay: -0.6s; } @keyframes loading { 0%,40%,100%{/*定义每帧的动作*/ -webkit-transform: scaleY(0.5); } 20%{ -webkit-transform: scaleY(1); } } loading2: 1、HTML: 1 2、CSS: 1 2 3 4 5 6 ...
1、定义加载整体.loading64的基本样式,设置display: flex布局,让子元素平行垂直居中。 2、子标签圆形元素.circle64,定义其样式大小,设置animation动画,并且开启混合模式mix-blend-mode,增加模糊滤镜filter: blur(...)。 3、通过:nth-child选择器,分别给两个圆形设置不同的背景颜色,并且给第二个圆形元素设置动画延迟...
DOCTYPE html> CSS Circle Loading Animation .loader { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotat...
纯css展示loading加载动画 https://uiverse.io/barisdogansutcu/light-rat-32 <svg viewBox="25 25 50 50"> <circle r="20" cy="50" cx="50"></circle> </svg> svg { width: 3.25em; transform-origin: center; animation: rotate4 2s linear infinite; } circle { fill: none; stroke: hsl(...