您的位置 首页 css教程

用CSS做Loading加载动画,旋转动画款~你值得保存


旋转动画款

旋转动画款动画效果演示

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;}  

分享不易,请关注,点赞,评论哦,更多分享哦

文章来源:火云技术网

文章标题:用CSS做Loading加载动画,旋转动画款~你值得保存

文章地址:https://www.pyhw.net/66243_%e7%94%a8css%e5%81%9aloading%e5%8a%a0%e8%bd%bd%e5%8a%a8%e7%94%bb%ef%bc%8c%e6%97%8b%e8%bd%ac%e5%8a%a8%e7%94%bb%e6%ac%be%e4%bd%a0%e5%80%bc%e5%be%97%e4%bf%9d%e5%ad%98.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图