css-loader-nature

🕗 发布于 2024-11-05 18:47 css css3 html

css-loader-nature

loader-1

.loader-1 {
    width: 50px;
    aspect-ratio: 1;
    background: #ffd738;
    border-radius: 50%;
    display: grid;
}

.loader-1::before,
.loader-1::after {
    content: "";
    grid-area: 1/1;
    background: inherit;
    clip-path: polygon(0 0, 50% 40%, 100% 0, 60% 50%, 100% 100%, 50% 60%, 0 100%, 40% 50%);
    animation: l1 1s infinite alternate;
    transform: rotate(var(--r, 0)) scale(1)
}

.loader-1::after {
    --r: 45deg;
}

@keyframes l1 {
    100% {
        transform: rotate(var(--r, 0)) scale(1.4)
    }
}

loader-2

 .loader-2 {
     width: 60px;
     aspect-ratio: 1;
     display: grid;
     border-radius: 50%;
     background: radial-gradient(circle 15px, #ffd738 90%, #0000);
     filter: drop-shadow(0px 0px 1px #ffd738);
     animation: l2 1s infinite alternate linear;
 }

 .loader-2::before,
 .loader-2::after {
     content: "";
     grid-area: 1/1;
     border-radius: 50%;
     --g: no-repeat linear-gradient(#ffd738 0 0) 50%;
     background:
         var(--g)/100% 5px,
         var(--g)/5px 100%;
     -webkit-mask: radial-gradient(farthest-side, #0000 60%, #000 61%);
 }

 .loader-2::after {
     transform: rotate(45deg);
 }

 @keyframes l2 {
     100% {
         filter: drop-shadow(0px 0px 20px #ffd738)
     }
 }

loader-3

 .loader-3 {
   width: 50px;
   aspect-ratio: 1;
   display: flex;
   filter: drop-shadow(0px 0px 1px #8d847f);
   animation: l3 1s infinite alternate linear;
 }

 .loader-3:before {
   content: "";
   flex: 1;
   background: #8d847f;
   border-radius: 50%;
   -webkit-mask: radial-gradient(circle closest-side at 66% 40%, #0000 115%, #000 118%);
 }

 @keyframes l3 {
   100% {
     filter: drop-shadow(0px 0px 20px #8d847f)
   }
 }

loader-4

 .loader-4 {
   width: 50px;
   aspect-ratio: 1;
   background-color: #8d847f;
   border-radius: 50%;
   animation: l4 3s infinite;
 }

 @keyframes l4 {
   12.5% {
     background-image: radial-gradient(80% 65% at left, #0000 94%, #fff9)
   }

   25% {
     background-image: linear-gradient(90deg, #0000 50%, #fff9 0)
   }

   37.5% {
     background-image: radial-gradient(80% 65% at right, #fff9 94%, #0000)
   }

   50% {
     background-image: linear-gradient(#fff9 0 0)
   }

   62.5% {
     background-image: radial-gradient(80% 65% at left, #fff9 94%, #0000)
   }

   75% {
     background-image: linear-gradient(-90deg, #0000 50%, #fff9 0)
   }

   87.5% {
     background-image: radial-gradient(80% 65% at right, #0000 94%, #fff9)
   }
 }

loader-5

 .loader-5 {
   width: 80px;
   height: 40px;
   border-radius: 100px 100px 0 0;
   position: relative;
   overflow: hidden;
 }

 .loader-5:before {
   content: "";
   position: absolute;
   inset: 0 0 -100%;
   background:
     radial-gradient(farthest-side, #ffd738 80%, #0000) left 70% top 20%/15px 15px,
     radial-gradient(farthest-side, #020308 92%, #0000) left 65% bottom 19%/12px 12px,
     radial-gradient(farthest-side, #ecfefe 92%, #0000) left 70% bottom 20%/15px 15px,
     linear-gradient(#9eddfe 50%, #020308 0);
   background-repeat: no-repeat;
   animation: l5 2s infinite;
 }

 @keyframes l5 {

   0%,
   20% {
     transform: rotate(0)
   }

   40%,
   60% {
     transform: rotate(.5turn)
   }

   80%,
   100% {
     transform: rotate(1turn)
   }
 }

loader-6

 .loader-6 {
   width: 80px;
   height: 40px;
   border-radius: 100px 100px 0 0;
   background:
     linear-gradient(0deg, #0000, #fff, #0000) 70% 30%,
     linear-gradient(90deg, #0000, #fff, #0000) 72% 32%,
     linear-gradient(0deg, #0000, #fff, #0000) 26% 42%,
     linear-gradient(90deg, #0000, #fff, #0000) 23% 44%,
     linear-gradient(0deg, #0000, #fff, #0000) 51% 54%,
     linear-gradient(90deg, #0000, #fff, #0000) 51% 53% #020308;
   background-size: 2px 10px, 10px 2px;
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
 }

 .loader-6:before,
 .loader-6:after {
   content: "";
   position: absolute;
   inset: 100% auto auto 20px;
   height: 3px;
   width: 20px;
   background: linear-gradient(90deg, #0000, #fff);
   transform-origin: right;
   transform: rotate(-20deg) translate(-20px);
   animation: l6 2s infinite;
 }

 .loader-6:after {
   inset: 100% auto auto -5px;
   animation-delay: .75s;
 }

 @keyframes l6 {
   100% {
     transform: rotate(-20deg) translate(120px)
   }
 }

loader-7

 .loader-7 {
   width: 80px;
   height: 40px;
   background:
     radial-gradient(circle 11px at top, #0000 94%, #b0e5f3) 0 20px,
     radial-gradient(circle 11px at top, #0000 94%, #5dc1e4) 0 10px,
     radial-gradient(circle 11px at top, #0000 94%, #008cd9) 0 0;
   background-size: 20px 100%;
   background-repeat: repeat-x;
   animation: l7 1s infinite linear;
 }

 @keyframes l7 {
   50% {
     background-position: 10px 15px, -10px 12px, 15px 8px
   }

   100% {
     background-position: 20px 20px, -20px 10px, 20px 0px
   }
 }

loader-8

 .loader-8 {
   width: 100px;
   height: 50px;
   border-radius: 100px 100px 0 0;
   position: relative;
   overflow: hidden;
 }

 .loader-8:before {
   content: "";
   position: absolute;
   inset: 0 0 -100%;
   background: radial-gradient(farthest-side at top, #0000 35%, #aa47be, #039be6, #26c6dc, #459e44, #f9ec44, #f68524, #fa3536, #0000) bottom/100% 50% no-repeat;
   animation: l8 2s infinite;
 }

 @keyframes l8 {

   0%,
   20% {
     transform: rotate(0)
   }

   40%,
   60% {
     transform: rotate(.5turn)
   }

   80%,
   100% {
     transform: rotate(1turn)
   }
 }

loader-9

 .loader-9 {
   width: 80px;
   height: 40px;
   background: #4dbefa;
   position: relative;
   overflow: hidden;
   animation: l9-0 1.5s infinite steps(10);
 }

 .loader-9:before,
 .loader-9:after {
   content: "";
   position: absolute;
   inset: -50%;
   --rad: radial-gradient(1px 4px, #eee 92%, #0000);
   background: var(--rad) 20% 0, var(--rad) 70% 7%;
   background-size: var(--w, 20px) var(--h, 18px);
   animation: l9-1 0.2s linear infinite;
   transform: skew(-10deg);
 }

 .loader-9:after {
   --h: 12px;
   --w: 16px;
   animation-duration: 0.3s;
 }

 @keyframes l9-0 {

   0%,
   15%,
   20%,
   30%,
   100% {
     background: #4dbefa
   }

   10%,
   22% {
     background: #7accf7
   }
 }

 @keyframes l9-1 {
   100% {
     transform: skew(-10deg) translateY(var(--h, 18px))
   }
 }

loader-10

 .loader-10 {
   width: 80px;
   height: 40px;
   background:
     radial-gradient(circle 25px at top right, #ffd738 40%, #0000),
     #4dbefa;
   position: relative;
   overflow: hidden;
 }

 .loader-10:before,
 .loader-10:after {
   content: "";
   position: absolute;
   top: 4px;
   left: -40px;
   width: 36px;
   height: 20px;
   --c: radial-gradient(farthest-side, #fff 96%, #0000);
   background:
     var(--c) 100% 100% /30% 60%,
     var(--c) 70% 0 /50% 100%,
     var(--c) 0 100% /36% 68%,
     var(--c) 27% 18% /26% 40%,
     linear-gradient(#fff 0 0) bottom/67% 58%;
   background-repeat: no-repeat;
   animation: l10 2s linear infinite;
 }

 .loader-10:after {
   top: 15px;
   --l: 200%;
 }

 @keyframes l10 {
   100% {
     left: var(--l, 105%)
   }
 }

loader-11

 .loader-11 {
   width: calc(6*30px);
   height: 50px;
   display: flex;
   color: #8d7958;
   filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
   clip-path: inset(0 100% 0 0);
   animation: l11 2s infinite steps(7);
 }

 .loader-11:before {
   content: "";
   width: 30px;
   height: 25px;
   background: currentColor;
   clip-path: polygon(0 50%, 30% 40%, 100% 0, 60% 40%, 100% 50%, 60% 60%, 100% 100%, 30% 60%);
 }

 @keyframes l11 {
   100% {
     clip-path: inset(0 -30px 0 0)
   }
 }

loader-12

 .loader-12 {
   width: calc(6*30px);
   height: 50px;
   display: flex;
   color: #8d7958;
   filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
   clip-path: inset(0 100% 0 0);
   animation: l12 2s infinite steps(7);
 }

 .loader-12:before {
   content: "";
   width: 30px;
   height: 25px;
   --c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);
   background:
     var(--c) left /70% 70%,
     var(--c) right/20% 20%,
     var(--c) top 0 right 15%/20% 20%,
     var(--c) bottom 0 right 15%/20% 20%;
 }

 @keyframes l12 {
   100% {
     clip-path: inset(0 -30px 0 0)
   }
 }

loader-13

 .loader-13 {
   width: calc(6*30px);
   height: 50px;
   display: flex;
   color: #8d7958;
   filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
   clip-path: inset(0 100% 0 0);
   animation: l13 2s infinite steps(7);
 }

 .loader-13:before {
   content: "";
   width: 30px;
   height: 25px;
   background:
     radial-gradient(farthest-side at right, currentColor 92%, #0000) left/20px 100% no-repeat,
     radial-gradient(farthest-side, currentColor 92%, #0000) right/17px 9px repeat-y;
 }

 @keyframes l13 {
   100% {
     clip-path: inset(0 -30px 0 0)
   }
 }

loader-14

 .loader-14 {
   width: calc(6*30px);
   height: 50px;
   display: grid;
   color: #8d7958;
   filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
   clip-path: inset(0 100% 0 0);
   animation: l14 2s infinite steps(7);
 }

 .loader-14:before,
 .loader-14:after {
   content: "";
   width: 24px;
   grid-area: 1/1;
   height: 9px;
   background:
     radial-gradient(farthest-side, currentColor 90%, #0000) left/10px 9px,
     conic-gradient(from -106deg at right, #0000, currentColor 2deg 29deg, #0000 33deg) right/17px 11px;
   background-repeat: no-repeat;
   transform: rotate(7deg);
   transform-origin: 5px 50%;
 }

 .loader-14:after {
   margin-top: 12px;
   transform: rotate(-7deg);
 }

 @keyframes l14 {
   100% {
     clip-path: inset(0 -30px 0 0)
   }
 }

loader-15

 .loader-15 {
   width: 80px;
   height: 40px;
   background: #83def1;
   position: relative;
   overflow: hidden;
 }

 .loader-15:before {
   content: "";
   position: absolute;
   top: 10px;
   left: 0;
   height: 20px;
   width: 30px;
   background:
     radial-gradient(farthest-side, #000 50%, #fff 52% 80%, #0000) 78% 22%/5px 5px,
     radial-gradient(farthest-side, #fb4f05 92%, #0000) right/80% 100%,
     radial-gradient(farthest-side at left, #fb4f05 92%, #0000) left/35% 80%;
   background-repeat: no-repeat;
   clip-path: polygon(0 0, 100% 0, 100% 40%, 81% 50%, 100% 60%, 100% 100%, 0 100%, 20% 50%);
   animation: l15 1.5s infinite;
 }

 @keyframes l15 {
   0% {
     transform: translate(-100%)
   }

   40% {
     transform: translate(15px)
   }

   80%,
   100% {
     transform: translate(100px)
   }
 }

loader-16

 .loader-16 {
   width: 20px;
   height: 80px;
   background: #935936;
   position: relative;
 }

 .loader-16:before {
   content: "";
   position: absolute;
   top: 10px;
   left: -22px;
   width: 25px;
   height: 60px;
   background:
     radial-gradient(farthest-side, #fff 92%, #0000) 60% 6px/4px 4px,
     radial-gradient(50% 60%, #53707b 92%, #0000) center/70% 55%,
     radial-gradient(farthest-side, #53707b 92%, #0000) 50% 3px/14px 14px,
     radial-gradient(142% 100% at bottom right, #0000 64%, #53707b 65%) bottom/57% 40%,
     conic-gradient(from -120deg at right, #53707b 36deg, #0000 0)100% 3px/51% 12px,
     conic-gradient(from 120deg at top left, #0000, #ef524a 2deg 40deg, #0000 43deg) top/100% 10px;
   background-repeat: no-repeat;
   transform: rotate(-26deg);
   transform-origin: 100% 80%;
   animation: l16 .25s infinite linear alternate;
 }

 .loader-16:after {
   content: "";
   position: absolute;
   width: 6px;
   height: 12px;
   left: -6px;
   bottom: 15px;
   border-radius: 100px 0 0 100px;
   background: #53707b;
 }

 @keyframes l16 {
   100% {
     transform: rotate(0)
   }
 }

原文地址：https://blog.csdn.net/d312697510/article/details/143362787

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：GPT避坑指南：如何辨别逆向、AZ、OpenAI官转
下一篇：GaussDB的向量化处理技术

【青牛科技】GC4931P替代A4931/Allegro在水泵、筋膜枪、吸尘器和电动工具中的应用
随着电动设备技术的不断发展，对电机驱动控制器的需求也在不断增加。GC4931P作为一种新型的电机驱动控制器，逐渐被视为A4931/Allegro的替代品。本文将探讨GC4931P在水泵、筋膜枪、吸尘器
阅读更多2024-11-06
软件测试：测试用例详解
一般是数字和字符组合成的字符串，可以包括（下划线、单词缩写、数字等等），但是需要注意的是，尽量不要写汉语拼音，因为拼音的意义可能有好几种，有可能会导致乱码；
阅读更多2024-11-06
通过自然语言表达你的想法。GitHub Spark让任何人都能使用人工智能，为自己创建软件...
我们能否让任何人都能使用人工智能，为自己创建软件？尽管开发者喜欢定制自己的开发环境以提高效率和趣味性，但创建个性化应用程序的复杂性常常阻止他们这样做。如何使个性化软件的创建变得像定制开发环境一样简单?
阅读更多2024-11-06
好看的超清4K视频素材去哪儿找？下载素材资源网站推荐
这个网站的视频素材有详细介绍，包括4K和1080P的标识，且许多素材都可以通过网盘直接下载，特别适合新手创作者。在这个高清、4K视频盛行的时代，要制作出让人眼前一亮的视频内容，超清4K视频素材必不可少
阅读更多2024-11-06
QML项目实战：自定义TextField
1.activeFocusOnPress ：当用户点击 TextField 时，自动将焦点设置到该控件上。2.antialiasing：启用抗锯齿功能，使文本显示更加平滑。3.readOnly：将
阅读更多2024-11-06
架构学习第四周--高可用与NoSQL数据库
负载均衡（），简称LB，是一种服务或基于硬件设备等实现的高可用反向代理技术，负载均衡将特定的业务(web服务、网络流量等分担给指定的一个或多个后端特定的服务器或设备，从而提高了公司业务的并发处理能力、
阅读更多2024-11-06
函数对象笔记
将函数指针传入compare时，编译器并不知道函数是什么。代码中使用C++中的模板，调用使用函数指针调用函数。指向一个函数的指针，可以动态调用不同的函数。，可以如同函数一样被调用。
阅读更多2024-11-06
【Unity基础】粒子系统与VFX Graph的区别
本文介绍了Unity中粒子系统与VFX Graph之间的区别
阅读更多2024-11-06
动态ip如何自动更换ip
在探讨如何自动更换动态IP地址时，我们首先需要理解动态IP的基本概念。IP地址，即互联网协议地址，分配给每台连接到互联网的设备的唯一标识符。与传统静态IP地址不同，动态IP地址是由网络服务提供商（IS
阅读更多2024-11-06
知识课堂——高匿ip在不同业务中的重要作用
高匿IP在网络数据采集、网络营销与推广、在线游戏以及隐私保护与安全等业务中都有着重要的作用。
阅读更多2024-11-06

css-loader-nature

css-loader-nature

loader-1

loader-2

loader-3

loader-4

loader-5

loader-6

loader-7

loader-8

loader-9

loader-10

loader-11

loader-12

loader-13

loader-14

loader-15

loader-16

相关文章