首页 > 代码库 > 一个小动画，颠覆你的CSS世界观
一个小动画，颠覆你的CSS世界观
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } .loadBlock { width: 104px; height: 84px; position: fixed; top: 43%; left: 50%; margin-left: -52px; text-align: center; z-index: 999; color: green; overflow: hidden; background:#6959CD; border-radius:5px ; } .loadBg { background: url(img/loadCartoon.png) 0 -80px no-repeat; width: 90px; height: 50px; margin: 11px auto 0; background-size: cover; animation: loadBg 1s infinite linear; -webkit-animation: loadBg 1s infinite linear; position: relative; z-index: 2; } @keyframes loadBg { 0% { left: -5.2rem; } 99.99% { left: 5.2rem; } 100% { left: -5.2rem; } } .loadCartoon { position: absolute; top: 0; left: 0.6rem; animation: loadCartoon 1s linear infinite alternate; -webkit-animation: loadCartoon 1s linear infinite alternate; z-index: 6; } @keyframes loadCartoon { 0% { top: 0.4rem; } 50% { top: 0rem; } 100% { top: 0.4rem; } } .loadHead { background: url(img/loadCartoon.png) no-repeat; width: 90px; height: 34px; position: absolute; left: 19px; top: 4px; z-index: 9; background-size: cover; } .loadBody { background: url(img/loadCartoon.png) 0 -34px no-repeat; width: 90px; height: 15px; position: absolute; left: 19px; top: 32.4px; z-index: 7; background-size: cover; } .loadDun { background: url(img/loadCartoon.png) 0 -49px no-repeat; width: 90px; height: 18px; position: absolute; left: 36.4px; top: 34px; z-index: 10; background-size: cover; } .loadCappa { background: url(img/loadCartoon.png) 0 -67px no-repeat; width: 90px; height: 11px; position: absolute; left: 46px; top: 28px; z-index: 8; background-size: cover; animation: loadCappa 1s ease-in-out 0s infinite; -webkit-animation: loadCappa 1s ease-in-out 0s infinite; transform-origin: 0px 5px 20px; -webkit-transform-origin: 0px 5px 20px; } @keyframes loadCappa { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 50% { transform: rotate(18deg); -webkit-transform: rotate(18deg); } 100% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } } .loadCon { color: #fff; font-size: 12px; text-align: center; line-height: 18px; letter-spacing: 2px; position: relative; z-index: 4; } .backcolor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*background: black;*/ opacity: 0.5; border-radius: 5%; -webkit-border-radius: 5%; } </style> </head> <body> <div class="loadBlock"> <div class="loadBg"></div> <div class="loadCartoon"> <div class="loadHead"></div> <div class="loadBody"></div> <div class="loadDun"></div> <div class="loadCappa"></div> </div> <p class="loadCon">加载中...</p> <div class="backcolor"></div> </div> </body></html>
一个小动画，颠覆你的CSS世界观
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。