HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>loading</p> </div> </body> </html>
CSS:
<style> * { margin: 0; padding: 0; list-style: none; } div { width: 85px; height: 70px; margin: 50px auto; } ul { width: 85px; height: 50px; } li { width: 8px; height: 50px; background-color: green; float: left; margin-left: 5px; animation: loading 1.2s ease-in-out infinite; } p { text-align: center; vertical-align: middle; } li:nth-of-type(1) { animation-delay: -1.1s; } li:nth-of-type(2) { animation-delay: -1s; } li:nth-of-type(3) { animation-delay: -0.9s; } li:nth-of-type(4) { animation-delay: -0.8s; } li:nth-of-type(5) { animation-delay: -0.7s; } li:nth-of-type(6) { animation-delay: -0.6s; } @keyframes loading { 0%,100% { transform: scaleY(1); } 50% { transform: scale(.4); } } </style>
HTML:
css:
<style type="text/css"> div { width: 200px; height: 200px; border-radius: 50%; position: relative; margin: 100px auto; background-color: black; } div > * { top: 0; right: 0; bottom: 0; left: 0; margin: auto; } div > div { width: 95%; height: 95%; border: 5px #333 solid; border-radius: 50%; border-top-color: #eee; background-size: 100%; transform: rotateZ(0deg); position: absolute; } img { width: 95%; height: 95%; border-radius: 50%; position: absolute; opacity: 1; } div:hover div { animation: rotate 1s linear infinite; } div:hover img { opacity: .6; } @keyframes rotate { 0% { transform: rotateZ(0deg); } 25% { transform: rotateZ(90deg); } 50% { transform: rotateZ(180deg); } 75% { transform: rotateZ(270deg); } 100% { transform: rotateZ(360deg); } } </style>
相关文章
精彩导读
热门资讯
关注我们
