<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loading</title>
<style>
html,
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.loading {
width: 70%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
/* 21 css */
.mouth {
fill: none;
stroke: rgba(73, 125, 235, 1);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 44, 44;
transform-origin: center;
/* transform动画时以自身中心作为基点 */
animation: mounthAni 2.3s ease-out infinite;
}
.eye {
fill: none;
stroke: rgba(73, 125, 235, 1);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 0, 66;
transform-origin: center;
transform: rotate(-45deg);
animation: eyeAni 2.3s ease-in-out infinite;
}
@keyframes mounthAni {
40% {
stroke-dasharray: 44, 22;
/* 间距改为1/4 */
}
80%,
100% {
stroke-dasharray: 44, 44;
/* 间距恢复为1/2 */
transform: rotate(720deg);
}
}
@keyframes eyeAni {
40% {
stroke-dasharray: 0, 77;
/* 间距改为7/8 */
}
80%,
100% {
transform: rotate(675deg);
/* 间距恢复为3/4 */
stroke-dasharray: 0, 66;
}
}
/* 22 css */
.path {
stroke-dasharray: 2000;
stroke-dashoffset: 0;
animation: dash 5s linear infinite;
}
@keyframes dash {
0% {
stroke-dashoffset: 2000;
}
90% {
stroke-dashoffset: 0;
}
}
.path2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: loading22 5s linear infinite;
}
@keyframes loading22 {
60% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div class="loading">
<!-- 1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="rgba(73,125,235,1)"
d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
<path fill="rgba(73,125,235,1)" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
<!-- 2 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
<path fill="rgba(73,125,235,1)"
d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
transform="rotate(275.098 25 25)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25"
to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
<!-- 3 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
<path fill="rgba(73,125,235,1)"
d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
transform="rotate(275.098 25 25)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25"
to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
<!-- 4 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70px" height="70px"
viewBox="0 0 24 24" style="enable-background:new 0 0 50 50" xml:space="preserve">
<rect x="0" y="0" width="4" height="7" fill="rgba(73,125,235,1)" transform="scale(1 1.94336)">
<animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1"
begin="0s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="10" y="0" width="4" height="7" fill="rgba(73,125,235,1)" transform="scale(1 2.72331)">
<animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1"
begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="20" y="0" width="4" height="7" fill="rgba(73,125,235,1)" transform="scale(1 1.38997)">
<animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1"
begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
</svg>
<!-- 5 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70px" height="70px"
viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
<rect x="0" y="0" width="4" height="10" fill="rgba(73,125,235,1)" transform="translate(0 9.4336)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0"
begin="0" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="10" y="0" width="4" height="10" fill="rgba(73,125,235,1)" transform="translate(0 17.2331)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0"
begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="20" y="0" width="4" height="10" fill="rgba(73,125,235,1)" transform="translate(0 3.89973)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0"
begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
</svg>
loading图资源.zip （13个子文件） 
loading图资源 原生css 
两点对角旋转.html 3KB 方块反转.html 2KB 涟漪.html 1KB 圆点依次变大旋转.html 3KB 透明度变化圆点.html 6KB 小大小圆点旋转.html 6KB 三圆依次放缩.html 2KB 方块对角碎片.html 3KB 竖线拉伸.html 2KB 四角翻书.html 4KB 定圆点放缩.html 2KB
.DS_Store 6KB svg svg.html 203KB
彭式程序猿
- 粉丝: 2w+
- 资源: 17
最新资源
- 【Python】基于话题相似度的夸夸机器人.zip
- 【机器人】将ChatGPT飞书机器人钉钉机器人企业微信机器人公众号部署到vercel及docker.zip
- 【java】用mirai机器人搜索音乐并以卡片的形式分享.zip
- 【爬虫】vue2聊天室，图灵机器人，node爬虫.zip
- 【Python爬虫】基于Python的淘宝千牛店铺上下架商品.zip
- 【Python】基于Python的美篇高清图片爬虫.zip
- MATLAB 风力发电系统低电压穿越-串电阻策略 低电压穿越 双馈风力发电机
- 【Python】基于Python爬虫爬取牛津三千词并导入到Anki方便背诵.zip
- 【Python】Python爬虫实战--小猪短租爬虫.zip
- 【Python学习】Python爬虫学习、总结、收集.zip
- 【PHP】一个PHP写的telegram机器人.zip
- 【Python爬虫】基于Python实现基本的网页爬虫.zip
- 【java】Java课程大项目-消息中间件比赛（实现进程内消息队列）.zip
- 【C#】基于C#的消息队列服务产品中间件.zip
- 【机器人】基于code hijack和code injection极简微信机器人.zip
- 【Python】简明饭否机器人教程（使用Python）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0