background: linear-gradient(transparent 0%,transparent 70%, #333 30%,#333 100%); -webkit-animation: loading-1 0.6s linear 0s infinite; } @-webkit-keyframes loading-2{ 0%{ transform: scaleY(1); } 50%{ transform: scaleY(0.5); } 100%{ transform: scaleY(1); } } .loading-2 i{ d...
background: conic-gradient(transparent, transparentvar(--per), #fa7var(--per), #fa7); mask: radial-gradient(transparent, transparent47.5px, #00048px, #000); animation: change 3s infinite cubic-bezier(0.57,0.29,0.49,0.76); } } @keyframes change {50%{ transform: rotate(270deg);--per:...
{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: conic-gradient(transparent, transparent var(--per), #fa7 var(--per), #fa7); mask: radial-gradient(transparent, transparent 47.5px, #000 48px, #000); animation: change 3s...
div{width:200px;height:200px;}div::before{position:absolute;content:"";top:0px;left:0px;right:0px;bottom:0px;border-radius:50%;border:3px solid transparent;border-top:3px solid #000;border-left:3px solid #000;animation:rotate 3s infinite ease-out;}div::after{position:absolute;content:"...
transparent 5% ); } 我们随机设置了conic-gradient()中的颜色 A到颜色 B到颜色 C到透明的变化,可以得到这么一张图形: 注意,对于上面的颜色没有任何要求,随机设置都可以。 我们可以让这个图形旋转起来,简单加上一个旋转动画: div { animation: rotate 2s ease-in-out infinite; ...
background: conic-gradient(transparent, transparent var(--per), #fa7 var(--per), #fa7); mask: radial-gradient(transparent, transparent 47.5px, #000 48px, #000); animation: change 3s infinite cubic-bezier(0.57, 0.29, 0.49, 0.76); ...
animation: anim 1s linear infinite; } .shape:nth-child(2) { left:-40px; top: 40px; bottom: 0; animation-delay: .25s; } @keyframes anim { 0%, 100% { box-shadow: -40px 0 0 transparent; background-color: #ff8c00; } 50% ...
{-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;position:absolute;border-left:5px solid #87CEFA;border-right:5px solid #FFC0CB;border-top:5px solid transparent;border-bottom:5px solid transparent;-webkit-animation:animate 2...
loading{background:conic-gradient(transparent10%,royalblue90%) } 1. 2. 3. 效果如下: 然后,整体是一个环形,可以通过径向渐变配合mask遮罩实现。 radial-gradient() - CSS:层叠样式表 | MDN (mozilla.org)[2] mask - CSS: Cascading Style Sheets | MDN (mozilla.org)[3] ...
.loading_1{width:35px;height:35px;margin:auto;border-radius:50%;position:relative;background-color:#000;/*display: block;*/background:linear-gradient(transparent 0%, transparent 70%, #333 70%, #333 100%);animation:loading-1 .2s linear 0s infinite;}@keyframes loading-2{0%{ ...