.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; } 大功告...
How to Make a Spinning Loading Animation with CSS Let’s start with this spinner, which is actually pretty straightforward to make: First, I’ll create a div and give it the class loader. Next, I’ll target this div with the following CSS: H...
绘制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...
}.loaderspan:nth-child(3) {--c: mediumpurple; } 定义动画效果: .loaderspan{animation: blinking2slinear infinite;animation-delay:var(--d);transform:scale(0); }@keyframesblinking {0%,100%{transform:scale(0); }40%,80%{transform:scale(1); ...
CodePen Embed Fallback Author: Gray Ghost Here is a one-div spinning loader made without JavaScript. It resembles Google Chrome’s browser tab loader. It uses the following techniques to bring the animation to life: Keyframes Pseudos Half a circle for the loader to fill ...
.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 { ...
完整的代码,你可以戳这里:CodePen Demo -- Gradient Line Animation 仔细看这个图形,如果只取其中斜对角的一半,不就是我们想要的效果了吗? 当然,上述 DEMO 中利用伪元素进行旋转的代码,还可以进行优化。我们可以利用 CSS @property 变量动画替换整个元素的旋转,从而得到更优雅的代码。如此一来,完整的代码,就变成...
.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);...
While minimal in appearance, this pen packs in details with several creative uses of the transform property — there’s even a little bump in the road.View the code here.23. Snow GlobeThe coziest example we could find, this snow globe animation, adds an ambiance to your page that you ...