- Show the effect – 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="circle6"></div> > #circle6 {display: block; position: absolute; top: 50%; left: 50%; height: 50px; width: 50px; margin: -25px 0 0 -25px; Border: 4px rgba(0, 0, 0, 0.25) solid; border-top: 10px #008744 solid; border-right: 10px #0057e7 solid; border-bottom: 10px #d62d20 solid; border-left: 10px #ffa700 solid; border-radius: 50%; -webkit-animation: spin6 1s infinite linear; animation: spin6 1s infinite linear; } @-webkit-keyframes spin6 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin6 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } </style> </body> </html>Copy the code