css几行代码实现渐变加载动画
布依前端
2022年12月11日 12:49
收录于文集
共14篇

实现原理：1、普通加载动画利用边框+动画+关键帧；2、渐变利用锥形渐变函数+伪类元素+动画。

技术栈：盒子边框、animation+关键帧和伪类元素。

【css通用样式】

代码块
CSS
自动换行
复制代码
:root {
  --bg--: hsl(225deg, 9.5%, 8.2%);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg--);
}
/*通用动画关键帧*/
@-webkit-keyframes loading {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
复制成功

1、普通加载动画实现

【效果图】

【HTML代码】

代码块
HTML
自动换行
复制代码
<div class="loader"></div>
复制成功

【css代码】

代码块
CSS
自动换行
复制代码
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: loading 2s linear infinite;
  animation: loading 2s linear infinite;
}
复制成功

2、渐变加载动画实现

【效果图】

【HTML代码】

代码块
HTML
自动换行
复制代码
<div class="loading-view"></div>
复制成功

【CSS代码】

代码块
CSS
自动换行
复制代码
.loading-view {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(rgba(83, 185, 240, 0) 0%, rgb(0, 72, 255) 100%);
  animation: loading linear 5s infinite;
}
.loading-view::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--bg--);
  transform: scale(0.8);
  position: absolute;
  top: 0;
  left: 0;
}
复制成功

好了，此次分享结束，有不明白的，评论区留言或者私聊。有想要实现的动画却不能实现的，评论区留言，下次更新。~bye

动画 html css 加载动画实现 渐变加载动画
本文为我原创，未经授权禁止转载
cv20410546