前言：
当前同学们对“css创意加载”可能比较关注，你们都需要知道一些“css创意加载”的相关内容。那么小编也在网络上汇集了一些对于“css创意加载””的相关文章，希望姐妹们能喜欢，姐妹们一起来学习一下吧！旋转动画款
旋转动画款动画效果演示
HTML代码
<div class="spinner-1"></div><div class="spinner-2"></div><div class="spinner-3"></div><div class="spinner-4"></div><div class="spinner-5"></div><div class="spinner-6"></div><div class="spinner-7"></div><div class="spinner-8"></div><div class="spinner-9"></div><div class="spinner-10"></div>
CSS代码
.spinner-1 { width:50px; height:50px; border-radius:50%; border:8px solid; border-color:#000 #0000; animation:s1 1s infinite;}@keyframes s1 {to{transform: rotate(.5turn)}}.spinner-2 { width:50px; height:50px; border-radius:50%; border:8px solid; border-color:lightblue; border-right-color: orange; animation:s2 1s infinite linear;}@keyframes s2 {to{transform: rotate(1turn)}}.spinner-3 { width:50px; height:50px; border-radius:50%; background:conic-gradient(#0000 10%,#25b09b); -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0); animation:s3 1s infinite linear;}@keyframes s3 {to{transform: rotate(1turn)}}.spinner-4 { width:50px; height:50px; border-radius:50%; padding:1px; background:conic-gradient(#0000 10%,#f03355) content-box; -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px)); -webkit-mask-composite: destination-in; mask-composite: intersect; animation:s4 1s infinite steps(10);}@keyframes s4 {to{transform: rotate(1turn)}}.spinner-5 { width:50px; height:50px; border-radius:50%; background:#514b82; -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg), radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px)); -webkit-mask-composite: destination-in; mask-composite: intersect; animation:s5 1s infinite ;}@keyframes s5 {to{transform: rotate(.5turn)}}.spinner-6 { width:50px; height:50px; border-radius:50%; padding:3px; background: radial-gradient(farthest-side,#ffa516 95%,#0000) 50% 0/12px 12px no-repeat, radial-gradient(farthest-side,#0000 calc(100% - 5px),#ffa516 calc(100% - 4px)) content-box; animation:s6 2s infinite ;}@keyframes s6 {to{transform: rotate(1turn)}}.spinner-7 { width:50px; height:50px; --c:radial-gradient(farthest-side,#25b09b 92%,#0000); background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%; background-size:12px 12px; background-repeat:no-repeat; animation:s7 1s infinite;}@keyframes s7 {to{transform: rotate(.5turn)}}.spinner-8 { width:50px; height:50px; color:#f03355; --c:radial-gradient(farthest-side,currentColor 92%,#0000); background: var(--c) 50% 0 /12px 12px, var(--c) 50% 100%/12px 12px, var(--c) 100% 50%/12px 12px, var(--c) 0 50%/12px 12px, var(--c) 50% 50%/12px 12px, linear-gradient(currentColor 0 0) 50% 50%/4px 100%, linear-gradient(currentColor 0 0) 50% 50%/100% 4px; background-repeat:no-repeat; animation:s8 1s infinite linear;}@keyframes s8 {to{transform: rotate(.5turn)}}.spinner-9 { width:50px; height:50px; border-radius:50%; background: radial-gradient(farthest-side,#f03355 95%,#0000) 50% 1px/12px 12px no-repeat, radial-gradient(farthest-side,#0000 calc(100% - 14px),#ccc 0); animation:s9 2s infinite linear;}@keyframes s9 {to{transform: rotate(1turn)}}.spinner-10 { width:50px; height:50px; border-radius:50%; color:#854f1d; background: linear-gradient(currentColor 0 0) center/100% 4px, linear-gradient(currentColor 0 0) center/4px 100%, radial-gradient(farthest-side,#0000 calc(100% - 6px),currentColor calc(100% - 5px)), radial-gradient(circle 6px,currentColor 94%,#0000 0); background-repeat: no-repeat; animation:s10 2s infinite linear; position: relative;}.spinner-10:before { content: ""; position: absolute; inset:0; border-radius: inherit; background:inherit; transform:rotate(45deg);}@keyframes s10 {to{transform: rotate(.5turn)}}/**/body { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); grid-auto-rows: 130px; place-items:center;}* { box-sizing: border-box;}分享不易，请关注，点赞，评论哦，更多分享哦
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
