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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看