项目中的图片旋转动画、背景渐变

m0_60827885

已于 2022-05-07 17:57:12 修改

阅读量222

点赞数

文章标签：动画

于 2022-01-26 11:13:42 首次发布

本文链接：https://blog.csdn.net/m0_60827885/article/details/122697946

版权

@keyframes spin1 {
    0% {
      transform: rotateX(65deg) rotateZ(0deg);
    }
    50% {
      transform: rotateX(65deg) rotateZ(180deg);
    }
    100% {
      transform: rotateX(65deg) rotateZ(360deg);
    }
  }
.rotating-ring {
    width: 230px;
    height: 230px;
    position: absolute;
    border-radius: 50%;
    background: url("/src/assets/common/forestFirePrevention/rotating-ring2.png");
    background-size: 100%;
    transform: rotateX(30deg);
    animation: spin1 3s linear infinite;
    top: -10%;
    left: 30%;
  }

}

从左到右的线性渐变：

#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); }

背景色渐变：

background-image: linear-gradient(rgba(48,151,254,0.2), rgba(48,151,254,0));