分享一个loader的css动画

2935868921

发表文章数:105

首页 » 经验教程 » 正文

分享一个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>

 

CSS

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap");
@keyframes rotation {
  from {
    -webkit-transform: rotate(359deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

svg * {
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.circle {
  -webkit-animation: rotation 8s infinite linear;
}
.circle_s {
  -webkit-animation: rotation 4s infinite linear;
}

 

演示

这里展示的是图片,实际会转动

分享一个loader的css动画

 

 

 

标签:

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

赞(0) 打赏
招聘广告位

评论 抢沙发

1 + 8 =


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

支付宝扫一扫打赏

微信扫一扫打赏

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

登录

忘记密码 ?

切换登录

注册