当前位置：网站首页>Page Loading Animation_Gradient Color Rotating Small Circle

Page Loading Animation_Gradient Color Rotating Small Circle

2022-08-06 08:22:00 【JiuMeilove】

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>
原网站

版权声明
本文为[JiuMeilove]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/218/202208060818396550.html

边栏推荐

猜你喜欢

随机推荐