- Show effect – Rotation effect
- 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, Initial-scale =1.0"> <title>Document</title> </head> <body> <div class="loader"></div> .loader:after { border-radius: 50%; width: 10em; height: 10em; } .loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; Border-top: 1.1 EM solid rGBA (255, 0, 255, 0.2); Border-right: 1.1 EM solid Rgba (255, 0, 255, 0.2); Border-bottom: 1.1 EM solid RGBA (255, 0, 255, 0.2); Border-left: 1.1 EM solid RGB (255, 0, 255); border-left: 1.1 EM solid RGB (255, 0, 255); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; Animation: load8 1.1s infinite Linear; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } </style> </body> </html>Copy the code