首页 前端知识 CSS3-使用transform animation实现圆弧渐变旋转动画,详细教程 源代码

CSS3-使用transform animation实现圆弧渐变旋转动画,详细教程 源代码

2024-06-24 02:06:44 前端知识 前端哥 854 953 我要收藏

最近组长要我研究一个开源网站的前端效果,其中有一个弧形旋转的动画,研究了下可以使用css里面的transform+animation组合实现。

先上效果图(忽略水印。。。视频转gif免费版的都有好大的水印)

 就是这样一个外圈有渐变移动的动画

实现步骤:

一、html代码:

<div class="bj">
      <div class="bjzhuan"></div>//旋转的盒子
      <div class="hidBox"></div>//遮蔽的盒子
</div>

 二、css代码:

1、先设置最外层盒子的背景

.bj {
  width: 600px;
  height: 600px;
  background-image: url("../../../public/bj.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

就是这样一个svg的图片

 2、设置需要旋转的盒子

.bjzhuan {
  position: absolute;//设置绝对定位
  width: 600px;
  height: 300px;
  top: 0;
  left: 0;
  will-change: transform;//提高浏览器的页面渲染性能
  transform-origin: 50% 100%;//设置旋转中心,这里设置成该盒子(bjzhuan)宽的一半,高的全部,刚好就是父盒子(bj)的中心
  border-radius: 50% 50% 0 0/100% 100% 0 0;//为元素添加圆角边框,前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径
  background-image: linear-gradient(
    60deg,
    rgba(109, 207, 251, 0) 0%,
    rgba(109, 207, 251, 0.2) 40%,
    rgba(109, 207, 251, 0) 100%
  );//实现渐变效果,60度
  clip-path: polygon(100% 0, 20% 0%, 50% 100%, 0 100%, 0 0);//实现不规则图形,这里是四个坐标点,用逗号分隔开
  -webkit-transform: rotate(360deg);//实现360度旋转
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

此时的效果:

 这样一个圆弧三角,并且是360度旋转的。(我这里只截了个图,转成gif又得注册。。)

3、最后再设置遮蔽盒子的css

.hidBox {
  height: 500px;
  width: 500px;
  position: absolute;
  background-color: #12131b;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
}

这样里面的三角部分就被挡住了,就会实现想要的效果

 大家有什么配置不懂的可以评论区留言,一起探讨

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13427.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!