分享一个loader的css动画

2935868921

发表文章数:103

首页 » 经验教程 » 正文

分享一个loader的css动画


前言

今天看到一个蛮好看的loader动画分享给大家

 

HTML

<svg width="140" height="140" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<line x1="59.9833" y1="140.333" x2="219.978" y2="139" stroke="#000" stroke-width="4"/>
<circle cx="60" cy="140" r="5" fill="#000"/>
<circle cx="220" cy="139" r="5" fill="#000"/>
</g>
<path class="circle" d="M109.957 122.655L140 105.309L170.043 122.655V157.345L140 174.691L109.957 157.345V122.655Z" stroke="#000" stroke-width="4"/>
<circle class="circle" cx="140" cy="140" r="13" stroke="#f5d77b" stroke-width="4"/>
<circle class="circle" cx="110" cy="192" r="13" stroke="#f7a78f" stroke-width="4"/>
<circle class="circle circle_s" cx="85" cy="232" r="8" stroke="#82c7c5" stroke-width="4"/>
<circle class="circle" cx="170" cy="88" r="13" stroke="#82c7c5" stroke-width="4"/>
<circle class="circle circle_s" cx="110" cy="192" r="5" fill="#f7a78f"/>
<circle class="circle circle_s" cx="185" cy="61" r="5" fill="#f5d77b"/>
</svg>

 

 

 

 

未经允许不得转载:作者:2935868921, 转载或复制请以 超链接形式 并注明出处 小狐狸资源网
原文地址:《分享一个loader的css动画》 发布于2020-11-22

赞(0) 打赏
招聘广告位

评论 抢沙发

8 + 6 =


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册