.loader{width:40em;height:3em; } 设置文字样式: .loader{color: dodgerblue;font-size:1.5em;text-transform: uppercase;font-family: sans-serif; } 给文字增加渐隐渐显动画: .loaderspan{animation: moving2slinear infinite; }@keyframesmoving {0%{filter:opacity(0); }33%{filter:opacity(1); }66%{f...
最后,用伪元素 ::after 再画出一个动的圆环: .circle::after{content:'';position: absolute;width:calc(var(--innerRadius) *2*2);height:calc(var(--innerRadius) *2*2);border:2pxsolid lime;border-radius:50%;animation: pulse2sease-out infinite; }.circle::after{animation-delay:1s; } 大功告...
You’ll notice from the above examples that it can take quite a lot of code to create an animation. If you’re feeling comfortable with CSS and are ready to optimize for space and time, consider tapping into aCSS animation library. Each library will have instructions on how to add it to...
A smooth loader, similar to a design you’d see in an app. SVG ∞ loader (no JS, cross-browser, minimal code) CodePen Embed Fallback Author: Ana Tudor A HTML & CSS loader built without JavaScript. A white line runs through an eight-shaped design to create an infinity symbol. This C...
绘制loader 块 .loader .span{ display:inline-block; width:2em; height:3em; background:#00BFFF; border-radius:0.2em; transform: skewX(-30deg) scale(0); margin-left:5px; filter:opacity(0); animation:animate 1s alternate infinite; animation-delay:calc(var(--n) * 0.2s) } .loader .spa...
.loader > span { width: 0.5em; height: 50%; background-color: deeppink; } 增加子元素的动画效果: .loader > span { transform: scaleY(0.05) translateX(-0.5em); animation: span-animate 1.5s infinite ease-in-out; } @keyframes span-animate { ...
.loader span:nth-child(6) { --c: dodgerblue; } .loader span:nth-child(3) { --c: mediumpurple; } 定义动画效果: .loader span { animation: blinking 2s linear infinite; animation-delay: var(--d); transform: scale(0); } @keyframes blinking { ...
CSS Loader Pure CSS3 MacBook Air with Thunderbird Display and Keyboard Twitter Button Concept CSS3 Loading Animation Pure CSS3 Vertical Menu with Hover Effect CSS3 Stamp effect using radial gradients I Love Blur Social Navigation Login Calendar ...
[3]CodePen Demo -- 内凹平滑圆角 - inner curve:https://codepen.io/Chokcoco/pen/ExqzaXd。 [4]CSS Shape - Inner Curve/Notch:https://css-shape.com/inner-curve/。 [5]上述链接:https://css-shape.com/inner-curve/。 [6]Github -- iCSS: https://github.com/chokcoco/iCSS。
.loader span:nth-child(4){-webkit-animation:span-4 2s ease-in-out infinite;}/* position:relative父级相对定位,position:absolute子级绝对定位,nth-child(1)匹配属于其父元素的第N个子元素,这里找到的是第一个span*/ 2.加入动画 代码如下 @-webkit-keyframesspan-1{0%{-webkit-transform:translate(0);...