龙空技术网

纯CSS实现3点旋转的Loading特效 8/117

德育处主任pro 102

前言:

当前我们对“css围绕中心旋转”都比较关怀,小伙伴们都需要分析一些“css围绕中心旋转”的相关文章。那么小编也在网摘上汇集了一些有关“css围绕中心旋转””的相关文章,希望你们能喜欢,姐妹们一起来学习一下吧!

当用户在等待页面加载时,一款好看的Loading特效可以有效提高用户对网站的印象,从而提升用户满意度。今天,我为大家介绍一款纯CSS实现的多点旋转Loading特效。

这个Loading特效由3个点组成,点会围绕一个中心点不断旋转,形成一个炫酷的旋转效果。同时,每个点的大小和颜色也不断变换,增加了动画的层次感和视觉效果。

这款特效代码简单,使用方便,只需要少量的CSS代码即可在你的网站或者APP中应用,为用户带来更好的体验。

如果你正在寻找一款美观、实用的Loading特效,那么不妨来试试这个纯CSS实现的多点旋转Loading特效。让它为你的网站增添一份炫酷和动感吧!

<div class="loading"></div><style>.loading {  margin: 20px;  position: relative;  width: 15px;  height: 15px;  border-radius: 100%;  background-color: #000;  animation: ball-rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;  animation-fill-mode: both;}.loading:before,.loading:after {  position: absolute;  width: 15px;  height: 15px;  margin: 2px;  content: "";  opacity: 0.8;  border-radius: 100%;  background-color: #000;}.loading:before {  top: 0;  left: -28px;}.loading:after {  top: 0;  left: 25px;}@keyframes ball-rotate {  0% {    transform: rotate(0deg) scale(1);  }  50% {    transform: rotate(180deg) scale(0.6);  }  100% {    transform: rotate(360deg) scale(1);  }}</style>

标签: #css围绕中心旋转