1 Star 11 Fork 4

woai3c/visual-drag-demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 4.30 KB
一键复制 编辑 原始数据 按行查看 历史
guangzhi.tan 提交于 2022-06-13 17:48 +08:00 . update
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/visual-drag-demo/favicon.ico"><title>visual-drag-demo</title><style>.visual-loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999999999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #333;
font-size: 12px;
}
.visual-circle-path {
stroke: #0f62fe;
/* 给画笔设置一个颜色 */
stroke-width: 2;
/* 设置线条的宽度 */
stroke-dasharray: 95, 126;
/* 设置实现长95,虚线长126 */
stroke-dashoffset: 0;
/* 设置虚线的偏移位置 */
animation: visual-loading-dash 1.5s ease-in-out infinite;
}
@keyframes visual-loading-dash {
0% {
stroke-dasharray: 1, 126;
/* 实线部分1,虚线部分126 */
stroke-dashoffset: 0;
/* 前面1/126显示实线,后面125显示空白 */
}
50% {
stroke-dasharray: 95, 126;
/* 实线部分95,虚线部分126 */
stroke-dashoffset: -31px
/* 顺时针偏移31/126,即前31/126显示空白,后面3/4显示线条 */
}
to {
stroke-dasharray: 6, 120;
/* 实线部分6,虚线部分120 */
stroke-dashoffset: -120px;
/* 最后顺时针偏移120/126,即前120/126显示空白,后面6点显示线条部分 */
}
}
.visual-loading-svg {
width: 2.5em;
height: 2.5em;
max-width: 50px;
/* 设置svg显示区域大小 */
max-height: 50px;
animation: visual-loading-rotate 1.5s infinite ease-in-out;
/* 给svg也加上一个旋转动画 */
}
@keyframes visual-loading-rotate {
to {
transform: rotate(1turn);
/* 旋转1圈 */
}
}</style><link href="/visual-drag-demo/css/chunk-2142818a.74ef4024.css" rel="prefetch"><link href="/visual-drag-demo/css/chunk-3ef62fca.d4cdb83a.css" rel="prefetch"><link href="/visual-drag-demo/css/chunk-43a381aa.fdef241b.css" rel="prefetch"><link href="/visual-drag-demo/css/chunk-64871868.ee5a7fa3.css" rel="prefetch"><link href="/visual-drag-demo/css/chunk-cac1b34a.42c8fb88.css" rel="prefetch"><link href="/visual-drag-demo/css/chunk-cfacd118.ed76efeb.css" rel="prefetch"><link href="/visual-drag-demo/js/chunk-2142818a.7f5a306e.js" rel="prefetch"><link href="/visual-drag-demo/js/chunk-3ef62fca.f91edaac.js" rel="prefetch"><link href="/visual-drag-demo/js/chunk-43a381aa.4ebaf6c7.js" rel="prefetch"><link href="/visual-drag-demo/js/chunk-64871868.5a872232.js" rel="prefetch"><link href="/visual-drag-demo/js/chunk-cac1b34a.e8428cdf.js" rel="prefetch"><link href="/visual-drag-demo/js/chunk-cfacd118.83501c1e.js" rel="prefetch"><link href="/visual-drag-demo/css/app.46312347.css" rel="preload" as="style"><link href="/visual-drag-demo/css/chunk-vendors.a16c4353.css" rel="preload" as="style"><link href="/visual-drag-demo/js/app.51668b5a.js" rel="preload" as="script"><link href="/visual-drag-demo/js/chunk-vendors.f69207bd.js" rel="preload" as="script"><link href="/visual-drag-demo/css/chunk-vendors.a16c4353.css" rel="stylesheet"><link href="/visual-drag-demo/css/app.46312347.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but visual-drag-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"><div class="visual-loading-container"><svg viewBox="0 0 50 50" class="visual-loading-svg"><circle cx="25" cy="25" r="20" fill="none" class="visual-circle-path"></circle></svg><p>正在努力加载页面,请耐心等候...</p></div></div><script src="/visual-drag-demo/js/chunk-vendors.f69207bd.js"></script><script src="/visual-drag-demo/js/app.51668b5a.js"></script></body></html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/woai3c/visual-drag-demo.git
git@gitee.com:woai3c/visual-drag-demo.git
woai3c
visual-drag-demo
visual-drag-demo
master

搜索帮助