- Show the effect — it’s always rotating
- Coding
- Codepen. I/o/w – lianfu/PE…
<! 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, >< title>Document</title> </head> <body> <div id="spinner2"></div> block; position: absolute; top: 50%; left: 50%; height: 50px; width: 50px; margin: -25px 0 0 -25px; border: 5px solid transparent; border-top-color: #000000; border-bottom-color: #000000; border-radius: 50%; -webkit-animation: spinner2 .5s linear infinite; animation: spinner2 .5s linear infinite; } #spinner2:after { content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border: 5px solid transparent; border-radius: 50%; Background: Rgba (0, 0, 0, 0.25); -webkit-animation: spinner2_after 1s linear infinite; animation: spinner2_after 1s linear infinite; } @keyframes spinner2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner2_after { 0% { border-top: 5px solid #000000; border-bottom: 5px solid #000000; } 50% {border-top: 5px solid rgba(0, 0, 0, 0.25); Border-bottom: 5px solid rgba(0, 0, 0, 0.25); } 100% { border-top: 5px solid #000000; border-bottom: 5px solid #000000; } } @-webkit-keyframes spinner2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spinner2_after { 0% { border-top: 5px solid #000000; border-bottom: 5px solid #000000; } 50% {border-top: 5px solid rgba(0, 0, 0, 0.25); Border-bottom: 5px solid rgba(0, 0, 0, 0.25); } 100% { border-top: 5px solid #000000; border-bottom: 5px solid #000000; } } </style> </body> </html>Copy the code