转圈圈的css

最新推荐文章于 2024-08-31 02:24:31 发布

herbsama

最新推荐文章于 2024-08-31 02:24:31 发布

阅读量432

点赞数

分类专栏： css效果图文章标签： css3 学习

原文链接：https://www.bilibili.com/video/BV1sT4y1a7yz?spm_id_from=333.788.header_right.fav_list.click

版权

CSS动画圆形加载 hue-rotate transform:rotate linear-gradient

关键词由优快云通过智能技术生成

css效果图专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何使用CSS创建一个圆形背景颜色渐变旋转的加载效果。通过定义`@keyframes`动画，实现了背景颜色的平滑变化和内含元素的360度旋转，同时加载图标由内圈深色背景和外圈浅色背景组成，还有额外的光晕效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <div class="circle">
    <div class="loader"></div>
  </div>
</template>

<script setup>
</script>

<style scoped lang="less">
.circle{
  width: 100vw;
  height: 100vh;
  background-color: #001d30;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: changeBg 5s linear infinite;
  @keyframes changeBg{
    to
    {
      filter:  hue-rotate(360deg);
    }
  }
  .loader{
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(to top, #001d30 40%, #51eeee);
    // https://www.runoob.com/cssref/func-linear-gradient.html
    border-radius: 50%;
    animation: rotate 2s linear infinite;
  }
  @keyframes rotate{
    to
    {
      transform:  rotate(360deg);
    }
  }
  .loader::before{
    content: '';
    position: absolute;
    background: #001d30;
    inset: 20px 20px 0 0;
    border-radius: 50%;
  }
  .loader::after{
    content: '';
    position: absolute;
    top: 50px;
    right: -8px;
    width: 40px;
    height: 40px;
    background: #51eeee;
    border-radius: 50%;
    box-shadow: 0 0 5px #51eeee,0 0 25px #51eeee,0 0 50px #51eeee,0 0 75px #51eeee;
  }
}
</style>