Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Loading
.
.
.
css
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --dotDur: 1s; font-size: calc(20px + 10 * (100vw - 320px) / (1280 - 320)); } body { background-color: #d4f4fb; background-image: linear-gradient(#81dcf6, #d4f4fb); background-repeat: no-repeat; display: flex; font: 1em/1.5 Lobster, sans-serif; height: 100vh; overflow: hidden; } main { margin: auto; } .preloader { animation: spinCCW var(--dotDur) linear infinite; margin-bottom: 1.5em; position: relative; width: 9em; height: 9em; } .preloader, .preloader:before, .preloader:after, .preloader__stripe { border-radius: 50%; } .preloader:before, .preloader:after, .preloader__stripe { position: absolute; } .preloader:before, .preloader:after { animation: spinCW var(--dotDur) linear infinite; content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; } .preloader:before { background: radial-gradient(25% 6% at 50% 7.5%, #fff 12.5%, rgba(255, 255, 255, 0) 50%), radial-gradient(25% 6% at 50% 92.5%, #fff 12.5%, rgba(255, 255, 255, 0) 50%), radial-gradient(100% 100% at center, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 38% 46%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 50%); z-index: 2; } .preloader:after { box-shadow: 0.5em 0.5em 0.25em 0 rgba(0, 0, 0, 0.25), 0.5em 0.5em 0.25em 1.5em rgba(0, 0, 0, 0.25) inset; } .preloader__stripe { box-shadow: 0.25em 0.5em 0 inset; color: #255ff4; top: 50%; left: 50%; width: 7.5em; height: 7.5em; transform: translate(-50%, -50%) translateX(-0.75em); z-index: 1; } .preloader__stripe:nth-of-type(2n + 1) { color: #ffffff; } .preloader__stripe:nth-of-type(2) { transform: translate(-50%, -50%) rotate(45deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(3) { transform: translate(-50%, -50%) rotate(90deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(4) { transform: translate(-50%, -50%) rotate(135deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(5) { transform: translate(-50%, -50%) rotate(180deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(6) { transform: translate(-50%, -50%) rotate(225deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(7) { transform: translate(-50%, -50%) rotate(270deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(8) { transform: translate(-50%, -50%) rotate(315deg) translateX(-0.75em); } .status { color: #ffffff; text-align: center; text-shadow: -2px -2px 0 #17181c, 0 -2px 0 #17181c, 2px -2px 0 #17181c, 2px 0 0 #17181c, 2px 2px 0 #17181c, 0 2px 0 #17181c, -2px 2px 0 #17181c, -2px 0 0 #17181c; } .status__dot { animation: appear1 var(--dotDur) steps(1, start) infinite; display: inline-block; } .status__dot:nth-child(2) { animation-name: appear2; } .status__dot:nth-child(3) { animation-name: appear3; } @keyframes spinCW { to { transform: rotate(90deg); } } @keyframes spinCCW { to { transform: rotate(-90deg); } } @keyframes appear1 { from { visibility: hidden; } 33%, to { visibility: visible; } } @keyframes appear2 { from, 33% { visibility: hidden; } 67%, to { visibility: visible; } } @keyframes appear3 { from, 67% { visibility: hidden; } to { visibility: visible; } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css糖果环加载动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号