div+css实现转圈圈文字环绕loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现转圈圈文字环绕loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >



  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #321232;
}
.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.loader .section {
  width: 5px;
  height: 10px;
  background-color: rgba(255,255,255,0.075);
  border-radius: 2px;
}
.loader .section0 {
  position: absolute;
  transform: rotate(0deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.loader .section1 {
  position: absolute;
  transform: rotate(8deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.055s;
}
.loader .section2 {
  position: absolute;
  transform: rotate(16deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.11s;
}
.loader .section3 {
  position: absolute;
  transform: rotate(24deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.165s;
}
.loader .section4 {
  position: absolute;
  transform: rotate(32deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.22s;
}
.loader .section5 {
  position: absolute;
  transform: rotate(40deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.275s;
}
.loader .section6 {
  position: absolute;
  transform: rotate(48deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.33s;
}
.loader .section7 {
  position: absolute;
  transform: rotate(56deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.385s;
}
.loader .section8 {
  position: absolute;
  transform: rotate(64deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.44s;
}
.loader .section9 {
  position: absolute;
  transform: rotate(72deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.495s;
}
.loader .section10 {
  position: absolute;
  transform: rotate(80deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.55s;
}
.loader .section11 {
  position: absolute;
  transform: rotate(88deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.605s;
}
.loader .section12 {
  position: absolute;
  transform: rotate(96deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.66s;
}
.loader .section13 {
  position: absolute;
  transform: rotate(104deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.715s;
}
.loader .section14 {
  position: absolute;
  transform: rotate(112deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.77s;
}
.loader .section15 {
  position: absolute;
  transform: rotate(120deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.825s;
}
.loader .section16 {
  position: absolute;
  transform: rotate(128deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.88s;
}
.loader .section17 {
  position: absolute;
  transform: rotate(136deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.935s;
}
.loader .section18 {
  position: absolute;
  transform: rotate(144deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.99s;
}
.loader .section19 {
  position: absolute;
  transform: rotate(152deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.045s;
}
.loader .section20 {
  position: absolute;
  transform: rotate(160deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.1s;
}
.loader .section21 {
  position: absolute;
  transform: rotate(168deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.155s;
}
.loader .section22 {
  position: absolute;
  transform: rotate(176deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.21s;
}
.loader .section23 {
  position: absolute;
  transform: rotate(184deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.265s;
}
.loader .section24 {
  position: absolute;
  transform: rotate(192deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.32s;
}
.loader .section25 {
  position: absolute;
  transform: rotate(200deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.375s;
}
.loader .section26 {
  position: absolute;
  transform: rotate(208deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.43s;
}
.loader .section27 {
  position: absolute;
  transform: rotate(216deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.485s;
}
.loader .section28 {
  position: absolute;
  transform: rotate(224deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.54s;
}
.loader .section29 {
  position: absolute;
  transform: rotate(232deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.595s;
}
.loader .section30 {
  position: absolute;
  transform: rotate(240deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.65s;
}
.loader .section31 {
  position: absolute;
  transform: rotate(248deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.705s;
}
.loader .section32 {
  position: absolute;
  transform: rotate(256deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.76s;
}
.loader .section33 {
  position: absolute;
  transform: rotate(264deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.815s;
}
.loader .section34 {
  position: absolute;
  transform: rotate(272deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.87s;
}
.loader .section35 {
  position: absolute;
  transform: rotate(280deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.925s;
}
.loader .section36 {
  position: absolute;
  transform: rotate(288deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 1.98s;
}
.loader .section37 {
  position: absolute;
  transform: rotate(296deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 2.035s;
}
.loader .section38 {
  position: absolute;
  transform: rotate(304deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 2.09s;
}
.loader .section39 {
  position: absolute;
  transform: rotate(312deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 2.145s;
}
.loader .section40 {
  position: absolute;
  transform: rotate(320deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 2.2s;
}
.loader .section41 {
  position: absolute;
  transform: rotate(328deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 2.255s;
}
.loader .section42 {
  position: absolute;
  transform: rotate(336deg) translate(0, -45px);
  animation: rotate 2.5s ease infinite;
  animation-fill-mode: forwards;
  animation-delay: 2.31s;
}
.loader .section43 {
  position: absolute;
  transform: rotate(344deg).........完整代码请登录后点击上方下载按钮下载查看