首页 > 代码库 > 【CSS3】loading动画
【CSS3】loading动画
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:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div></div> <img src="img/bg.jpg" alt=""> </div> </body></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>
【CSS3】loading动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。