adobe 页面加载动画

先看效果
PS: 录制的gif没有那种感觉，感兴趣的朋友新建个文件用浏览器打开试试

css代码

<style type="text/css">
.loading {
background-color: #f5f5f5;
bottom: 0;
display: block;
left: 0;
opacity: .9;
position: fixed;
right: 0;
top: 0;
z-index: 2;
}
.loading:after {
left: 50%;
margin-left: -34px;
margin-top: -34px;
position: fixed;
top: 50%;
z-index: 3;
content: "";
background-image: url(image-url); /*替换图片的真实url*/
-webkit-animation: ofcold-block-loading-spinner 2s steps(60) infinite forwards;
animation: ofcold-block-loading-spinner 2s steps(60) infinite forwards;
background-repeat: no-repeat;
display: inline-block;
height: 68px;
width: 68px;
}
@-webkit-keyframes ofcold-block-loading-spinner {
0% {
background-position: 0 0
}

to {
background-position: -4080px 0
}
}
@keyframes ofcold-block-loading-spinner {
0% {
    background-position: 0 0
}

to {
    background-position: -4080px 0
}
}
</style>

<div class="loading">
</div>

使用ai绘制图形如下

Ryan

Mumujin

课程读者 267 声望

Full Stack Programmer @ Ofcold

一个全栈开发者，一个摄影者，一个骑行者，一个音乐爱好者。Please conta...

0 人点赞

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

讨论数量: 1

Mumujin

课程读者 267 声望 / Full Stack Programmer @ Ofcold

复制以下代码存储为.svg图片

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="4080px" height="68px" viewBox="0 0 4080 68">
<style type="text/css">
    .st0{fill-opacity:0;stroke:#000;stroke-width:4;stroke-opacity:0.1;}
    .st1{fill-opacity:0;stroke:#1473E6;stroke-width:4;}
</style>
<path class="st0" d="M34,4c16.6,0,30,13.4,30,30S50.6,64,34,64S4,50.6,4,34S17.4,4,34,4z"/>
<path class="st1" d="M34,4L34,4c16.6,0,30,13.4,30,30"/>
<path class="st0" d="M102,4c16.6,0,30,13.4,30,30s-13.4,30-30,30S72,50.6,72,34S85.4,4,102,4z"/>
<path class="st1" d="M102.8,4C119,4.4,132,17.7,132,34c0,3.4-0.6,6.7-1.6,9.8"/>
<path class="st0" d="M170,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S153.4,4,170,4z"/>
<path class="st1" d="M171.6,4C187.4,4.9,200,18,200,34c0,6.8-2.3,13.1-6.1,18.2"/>
<path class="st0" d="M238,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S221.4,4,238,4z"/>
<path class="st1" d="M240.4,4.1C255.8,5.3,268,18.2,268,34c0,10.1-5,19-12.6,24.4"/>
<path class="st0" d="M306,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S289.4,4,306,4z"/>
<path class="st1" d="M309.1,4.2C324.2,5.7,336,18.5,336,34c0,13.2-8.5,24.4-20.3,28.4"/>
<path class="st0" d="M374,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S357.4,4,374,4z"/>
<path class="st1" d="M377.9,4.3C392.6,6.2,404,18.8,404,34c0,16-12.6,29.1-28.4,30"/>
<path class="st0" d="M442,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S425.4,4,442,4z"/>
<path class="st1" d="M446.7,4.4C461,6.6,472,19,472,34c0,16.6-13.4,30-30,30c-2.1,0-4.2-0.2-6.2-0.6"/>
<path class="st0" d="M510,4c16.6,0,30,13.4,30,30s-13.4,30-30,30c-16.6,0-30-13.4-30-30S493.4,4,510,4z"/>
<path class="st1" d="M515.5,4.5C529.4,7.1,540,19.3,540,34c0,16.6-13.4,30-30,30c-4.7,0-9.2-1.1-13.2-3.1"/>
<path class="st0" d="M578,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S561.4,4,578,4z"/>
<path class="st1" d="M584.2,4.7C597.8,7.5,608,19.6,608,34c0,16.6-13.4,30-30,30c-7.3,0-14-2.6-19.1-6.9"/>
<path class="st0" d="M646,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S629.4,4,646,4z"/>
<path class="st1" d="M653,4.8C666.2,8,676,19.9,676,34c0,16.6-13.4,30-30,30c-9.7,0-18.3-4.6-23.8-11.8"/>
<path class="st0" d="M714,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S697.4,4,714,4z"/>
<path class="st1" d="M721.8,5C734.6,8.4,744,20.1,744,34c0,16.6-13.4,30-30,30c-12,0-22.3-7-27.1-17.2"/>
<path class="st0" d="M782,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S765.4,4,782,4z"/>
<path class="st1" d="M790.5,5.2C802.9,8.9,812,20.4,812,34c0,16.6-13.4,30-30,30c-14.1,0-26-9.8-29.2-22.9"/>
<path class="st0" d="M850,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S833.4,4,850,4z"/>
<path class="st1" d="M859.3,5.5C871.3,9.4,880,20.7,880,34c0,16.6-13.4,30-30,30c-16.1,0-29.3-12.7-30-28.6"/>
<path class="st0" d="M918,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S901.4,4,918,4z"/>
<path class="st1" d="M928,5.7C939.7,9.8,948,21,948,34c0,16.6-13.4,30-30,30s-30-13.4-30-30c0-1.4,0.1-2.8,0.3-4.1"/>
<path class="st0" d="M986,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S969.4,4,986,4z"/>
<path class="st1" d="M996.8,6c11.2,4.3,19.2,15.2,19.2,28c0,16.6-13.4,30-30,30s-30-13.4-30-30c0-3.2,0.5-6.3,1.4-9.1"/>
<path class="st0" d="M1054,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1037.4,4,1054,4z"/>
<path class="st1" d="M1065.5,6.3c10.8,4.5,18.5,15.2,18.5,27.7c0,16.6-13.4,30-30,30s-30-13.4-30-30c0-4.9,1.2-9.6,3.3-13.7"/>
<path class="st0" d="M1122,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1105.4,4,1122,4z"/>
<path class="st1" d="M1134.2,6.6c10.5,4.7,17.8,15.2,17.8,27.4c0,16.6-13.4,30-30,30s-30-13.4-30-30c0-6.6,2.1-12.7,5.7-17.6"/>
<path class="st0" d="M1190,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1173.4,4,1190,4z"/>
<path class="st1" d="M1203,6.9c10,4.9,17,15.2,17,27.1c0,16.6-13.4,30-30,30s-30-13.4-30-30c0-8.2,3.3-15.6,8.6-21"/>
<path class="st0" d="M1258,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1241.4,4,1258,4z"/>
<path class="st1" d="M1281.4,15.3c4.1,5.1,6.6,11.6,6.6,18.7c0,16.6-13.4,30-30,30s-30-13.4-30-30c0-9.6,4.6-18.2,11.6-23.7"/>
<path class="st0" d="M1326,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1309.4,4,1326,4z"/>
<path class="st1" d="M1355,26.4c0.6,2.4,1,5,1,7.6c0,16.6-13.4,30-30,30s-30-13.4-30-30c0-11,6-20.7,14.9-25.9"/>
<path class="st0" d="M1394,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1377.4,4,1394,4z"/>
<path class="st1" d="M1423.7,38.1c-2,14.6-14.5,25.9-29.7,25.9c-16.6,0-30-13.4-30-30c0-12.3,7.5-23,18.1-27.6"/>
<path class="st0" d="M1462,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1445.4,4,1462,4z"/>
<path class="st1" d="M1488.3,48.5c-5.1,9.2-15,15.5-26.3,15.5c-16.6,0-30-13.4-30-30c0-13.6,9-25,21.4-28.7"/>
<path class="st0" d="M1530,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1513.4,4,1530,4z"/>
<path class="st1" d="M1549.9,56.4c-5.3,4.7-12.3,7.6-19.9,7.6c-16.6,0-30-13.4-30-30c0-14.7,10.6-27,24.6-29.5"/>
<path class="st0" d="M1598,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1581.4,4,1598,4z"/>
<path class="st1" d="M1610,61.5c-3.7,1.6-7.7,2.5-12,2.5c-16.6,0-30-13.4-30-30c0-15.8,12.2-28.7,27.6-29.9"/>
<path class="st0" d="M1666,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1649.4,4,1666,4z"/>
<path class="st1" d="M1669.5,63.8c-1.2,0.1-2.3,0.2-3.5,0.2c-16.6,0-30-13.4-30-30s13.4-30,30-30c0.2,0,0.4,0,0.5,0"/>
<path class="st0" d="M1734,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1717.4,4,1734,4z"/>
<path class="st1" d="M1729.3,63.6C1715,61.4,1704,49,1704,34c0-16.6,13.4-30,30-30c1.1,0,2.2,0.1,3.3,0.2"/>
<path class="st0" d="M1802,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1785.4,4,1802,4z"/>
<path class="st1" d="M1790.1,61.5c-10.7-4.6-18.1-15.2-18.1-27.5c0-16.6,13.4-30,30-30c2,0,3.9,0.2,5.8,0.6"/>
<path class="st0" d="M1870,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1853.4,4,1870,4z"/>
<path class="st1" d="M1852,58c-7.3-5.5-12-14.2-12-24c0-16.6,13.4-30,30-30c2.8,0,5.6,0.4,8.2,1.1"/>
<path class="st0" d="M1938,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1921.4,4,1938,4z"/>
<path class="st1" d="M1915.3,53.6c-4.5-5.3-7.3-12.1-7.3-19.6c0-16.6,13.4-30,30-30c3.6,0,7.1,0.6,10.3,1.8"/>
<path class="st0" d="M2006,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S1989.4,4,2006,4z"/>
<path class="st1" d="M1979.9,48.7c-2.5-4.3-3.9-9.3-3.9-14.7c0-16.6,13.4-30,30-30c4.4,0,8.6,0.9,12.3,2.6"/>
<path class="st0" d="M2074,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2057.4,4,2074,4z"/>
<path class="st1" d="M2045.6,43.8c-1-3.1-1.6-6.4-1.6-9.8c0-16.6,13.4-30,30-30c5.1,0,9.9,1.3,14.1,3.5"/>
<path class="st0" d="M2142,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2125.4,4,2142,4z"/>
<path class="st1" d="M2112.4,38.9c-0.3-1.6-0.4-3.2-0.4-4.9c0-16.6,13.4-30,30-30c5.8,0,11.2,1.6,15.8,4.5"/>
<path class="st0" d="M2210,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2193.4,4,2210,4z"/>
<path class="st1" d="M2180,34.3c0-0.1,0-0.2,0-0.3c0-16.6,13.4-30,30-30c6.4,0,12.4,2,17.3,5.5"/>
<path class="st0" d="M2278,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2261.4,4,2278,4z"/>
<path class="st1" d="M2248.3,30.1C2250.2,15.4,2262.8,4,2278,4c7,0,13.5,2.4,18.6,6.5"/>
<path class="st0" d="M2346,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2329.4,4,2346,4z"/>
<path class="st1" d="M2317,26.3c3.4-12.8,15.1-22.3,29-22.3c7.6,0,14.6,2.8,19.9,7.5"/>
<path class="st0" d="M2414,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2397.4,4,2414,4z"/>
<path class="st1" d="M2386.1,22.9C2390.5,11.8,2401.4,4,2414,4c8.2,0,15.6,3.3,21,8.6"/>
<path class="st0" d="M2482,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2465.4,4,2482,4z"/>
<path class="st1" d="M2455.5,20c5-9.5,15-16,26.5-16c8.7,0,16.5,3.7,22,9.6"/>
<path class="st0" d="M2550,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2533.4,4,2550,4z"/>
<path class="st1" d="M2525,17.5c5.3-8.1,14.5-13.5,25-13.5c9.2,0,17.4,4.1,22.9,10.6"/>
<path class="st0" d="M2618,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2601.4,4,2618,4z"/>
<path class="st1" d="M2594.5,15.3C2600,8.4,2608.5,4,2618,4c9.6,0,18.2,4.5,23.7,11.6"/>
<path class="st0" d="M2686,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2669.4,4,2686,4z"/>
<path class="st1" d="M2664.1,13.5c5.5-5.8,13.3-9.5,21.9-9.5c10,0,19,5,24.4,12.5"/>
<path class="st0" d="M2754,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2737.4,4,2754,4z"/>
<path class="st1" d="M2733.7,11.9C2739,7,2746.2,4,2754,4c10.5,0,19.7,5.4,25.1,13.5"/>
<path class="st0" d="M2822,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2805.4,4,2822,4z"/>
<path class="st1" d="M2803.2,10.6c5.1-4.1,11.7-6.6,18.8-6.6c10.9,0,20.4,5.8,25.6,14.4"/>
<path class="st0" d="M2890,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2873.4,4,2890,4z"/>
<path class="st1" d="M2872.6,9.5c4.9-3.4,10.9-5.5,17.4-5.5c11.2,0,21,6.2,26.2,15.3"/>
<path class="st0" d="M2958,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S2941.4,4,2958,4z"/>
<path class="st1" d="M2942,8.6c4.7-2.9,10.1-4.6,16-4.6c11.6,0,21.7,6.6,26.7,16.2"/>
<path class="st0" d="M3026,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3009.4,4,3026,4z"/>
<path class="st1" d="M3011.4,7.8c4.3-2.4,9.3-3.8,14.6-3.8c12,0,22.3,7,27.1,17.1"/>
<path class="st0" d="M3094,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3077.4,4,3094,4z"/>
<path class="st1" d="M3080.6,7.1c4-2,8.6-3.1,13.4-3.1c12.3,0,22.9,7.4,27.5,18"/>
<path class="st0" d="M3162,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3145.4,4,3162,4z"/>
<path class="st1" d="M3149.8,6.6c3.7-1.7,7.8-2.6,12.2-2.6c12.6,0,23.4,7.8,27.9,18.9"/>
<path class="st0" d="M3230,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3213.4,4,3230,4z"/>
<path class="st1" d="M3218.9,6.1c3.4-1.3,7.2-2.1,11.1-2.1c12.9,0,24,8.2,28.2,19.7"/>
<path class="st0" d="M3298,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3281.4,4,3298,4z"/>
<path class="st1" d="M3287.9,5.7c3.2-1.1,6.6-1.7,10.1-1.7c13.2,0,24.5,8.6,28.5,20.5"/>
<path class="st0" d="M3366,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3349.4,4,3366,4z"/>
<path class="st1" d="M3356.9,5.4c2.9-0.9,5.9-1.4,9.1-1.4c13.5,0,25,9,28.7,21.3"/>
<path class="st0" d="M3434,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3417.4,4,3434,4z"/>
<path class="st1" d="M3425.8,5.1c2.6-0.7,5.4-1.1,8.2-1.1c13.8,0,25.5,9.4,29,22.1"/>
<path class="st0" d="M3502,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3485.4,4,3502,4z"/>
<path class="st1" d="M3494.7,4.9c2.4-0.6,4.8-0.9,7.3-0.9c14.1,0,26,9.8,29.2,22.9"/>
<path class="st0" d="M3570,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3553.4,4,3570,4z"/>
<path class="st1" d="M3563.6,4.7c2.1-0.5,4.2-0.7,6.4-0.7c14.4,0,26.4,10.2,29.3,23.7"/>
<path class="st0" d="M3638,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3621.4,4,3638,4z"/>
<path class="st1" d="M3632.4,4.5c1.8-0.3,3.7-0.5,5.6-0.5c14.7,0,26.9,10.6,29.5,24.5"/>
<path class="st0" d="M3706,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3689.4,4,3706,4z"/>
<path class="st1" d="M3701.3,4.4c1.5-0.3,3.1-0.4,4.7-0.4c15,0,27.4,11,29.6,25.3"/>
<path class="st0" d="M3774,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3757.4,4,3774,4z"/>
<path class="st1" d="M3770.1,4.3c1.2-0.2,2.6-0.3,3.9-0.3c15.2,0,27.8,11.4,29.7,26.1"/>
<path class="st0" d="M3842,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3825.4,4,3842,4z"/>
<path class="st1" d="M3838.9,4.2c1-0.1,2-0.2,3.1-0.2c15.5,0,28.3,11.8,29.8,26.9"/>
<path class="st0" d="M3910,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3893.4,4,3910,4z"/>
<path class="st1" d="M3907.6,4.1c0.8-0.1,1.6-0.1,2.4-0.1c15.8,0,28.7,12.2,29.9,27.6"/>
<path class="st0" d="M3978,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S3961.4,4,3978,4z"/>
<path class="st1" d="M3976.4,4c0.5,0,1.1,0,1.6,0c16,0,29.1,12.6,30,28.4"/>
<path class="st0" d="M4046,4c16.6,0,30,13.4,30,30s-13.4,30-30,30s-30-13.4-30-30S4029.4,4,4046,4z"/>
<path class="st1" d="M4045.2,4c0.3,0,0.5,0,0.8,0c16.3,0,29.6,13,30,29.2"/>
</svg>

6年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

adobe 页面加载动画

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

adobe 页面加载动画

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录