css 實現 載入中動畫效果
阿新 • • 發佈:2021-09-01
上程式碼:
<style> .pswp__preloader__icn { opacity:0.75; width: 24px; height: 24px; -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; margin-left: 60px; } .pswp__preloader__cut { position: relative; width: 12px; height: 24px; overflow: hidden; position: absolute; top: 0; left: 0; } .pswp__preloader__donut { box-sizing: border-box; width: 24px; height: 24px; border: 2px solid #000; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin:0; -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite; animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite; } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } } @keyframes clockwise { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } @-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0) } 50% { -webkit-transform: rotate(-140deg) } 100% { -webkit-transform: rotate(0) } } @keyframes donut-rotate { 0% { transform: rotate(0) } 50% { transform: rotate(-140deg) } 100% { transform: rotate(0) } } </style>
<div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div>
~