Page Loading Animation_Gradient Color Rotating Small Circle

JiuMeilove2022-08-06 08:22:51

Loading animation effect icon
在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转渐变</title>
<style> * {
 margin: 0; padding: 0; /* 元素的总高度和宽度包含内边距和边框(padding 与 border) : */ box-sizing: border-box; } section {
 /* 设置弹性盒模型 方便居中 */ display: flex; justify-content: center; align-items: center; /* 100% minimum height */ min-height: 100vh; background-color: #042104; } section .loader {
 position: relative; width: 120px; height: 120px; } section .loader span {
 position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background-color: aqua; */ transform: rotate(calc(18deg*var(--i))); animation: animateBg 10s linear infinite; } @keyframes animateBg {
 0% {
 /* filter滤镜 Here is to set the hue rotation */ filter: hue-rotate(0deg); } 100% {
 filter: hue-rotate(180deg); } } section .loader span::before {
 content: ''; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background-color: #00ff0a; box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a; animation: animate 2s linear infinite; animation-delay: calc(0.1s*var(--i)); } @keyframes animate {
 0% {
 transform: scale(1) } 80%, 100% {
 transform: scale(0); } } </style>
</head>
<body>
<script> window.onload = e => {
 console.log(e); var body = document.getElementsByTagName('body')[0]; var section = document.createElement('section') body.appendChild(section); var div = document.createElement('div'); div.className = 'loader'; section.appendChild(div); for (let index = 1; index <= 20; index++) {
 let span = document.createElement('span'); span.style = '--i:' + index + ';'; div.appendChild(span) } } </script>
</body>
</html>

thank
Similar articles