首页
导航
博客
电子书
算法
众创
代码
随贴
关于我们
您好,欢迎来到码863代码分享网! 请
[登录]
/
[注册]
搜 索
用于加载页面前显示的Loading动画纯CSS3方块翻转效果演示
编辑
网页加载时如果有很多js与css会引起网页卡钝现象,用个loading效果等网页内容加载完后再显示,体验会好很多 背景色可更换
代码正文
双击正文可选择全部
1[代码][html]
尝试一下
<html> <head> <meta charset="UTF-8"> <title>纯CSS3方块翻转效果的Loading加载动画DEMO演示</title> <style> body,html{width:100%;height:100%;} body{margin:0;} .je_loader_mask,.je_loader{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;background-color:#403833;} .je_loader{z-index:11} .je_loader .je_main{position:absolute;top:50%;left:50%;width:172px;height:128px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} @media (max-width:550px){.je_loader{-webkit-transform:scale(0.75);transform:scale(0.75)}} @media (max-width:440px){.je_loader{-webkit-transform:scale(0.5);transform:scale(0.5)}} .je_square{position:relative} .je_square:nth-child(1){margin-left:0px} .je_square:nth-child(2){margin-left:44px} .je_square:nth-child(3){margin-left:88px} .je_square:nth-child(4){margin-left:132px} .je_square span{position:absolute;top:0px;left:20px;height:36px;width:36px;border-radius:2px;background-color:#FFFFFF} .je_square span:nth-child(1){top:0px} .je_square span:nth-child(2){top:44px} .je_square span:nth-child(3){top:88px} .je_square:nth-child(1) span{-webkit-animation:animsquare1 2s infinite ease-in;animation:animsquare1 2s infinite ease-in} .je_square:nth-child(2) span{-webkit-animation:animsquare2 2s infinite ease-in;animation:animsquare2 2s infinite ease-in} .je_square:nth-child(3) span{-webkit-animation:animsquare3 2s infinite ease-in;animation:animsquare3 2s infinite ease-in} .je_square:nth-child(4) span{-webkit-animation:animsquare4 2s infinite ease-in;animation:animsquare4 2s infinite ease-in} .je_square span:nth-child(1){-webkit-animation-delay:0.00s;animation-delay:0.00s} .je_square span:nth-child(2){-webkit-animation-delay:0.15s;animation-delay:0.15s} .je_square span:nth-child(3){-webkit-animation-delay:0.30s;animation-delay:0.30s} @-webkit-keyframes animsquare1{0%,5%,95%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}30%,70%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare1{0%,5%,95%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}30%,70%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} @-webkit-keyframes animsquare2{0%,10%,90%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}35%,65%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare2{0%,10%,90%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}35%,65%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} @-webkit-keyframes animsquare3{0%,15%,85%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}40%,60%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare3{0%,15%,85%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}40%,60%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} @-webkit-keyframes animsquare4{0%,20%,80%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}45%,55%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare4{0%,20%,80%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}45%,55%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}} </style> </head> <body> <div class="je_loader_mask"></div> <div class="je_loader"> <div class="je_main"> <div class="je_square"> <span></span> <span></span> <span></span> </div> <div class="je_square"> <span></span> <span></span> <span></span> </div> <div class="je_square"> <span></span> <span></span> <span></span> </div> <div class="je_square"> <span></span> <span></span> <span></span> </div> </div> </div> </body> </html>
文明上网理性发言,请遵守新闻评论服务协议
0 条评论
发布评论
全部评论
最新
/
最热
暂无评论
加载更多
CopyRight 2002~2023 精通2100网 联系邮箱:qqtxt@163.com
版权所有:精通2100网
湘ICP备2023018646号-1
MYSQl共执行 3 个查询,用时 0.0020132064819336 秒,PHP脚本用时 0.004016 秒,占用内存 0.517 MB,Gzip 已启用