时间戳

首页 > 解决方案 > 旋转时是否可以保持渐变静止

css - 旋转时是否可以保持渐变静止

问题描述

我正在尝试使用 CSS（SVG cog）旋转“cog”。

但是我想知道是否可以将渐变保持在恒定角度，以使其看起来更逼真。

例如，cog20deg使用 CSS 变换旋转，但渐变保持不变，0deg因此看起来有一个恒定的光源。

标签： csscss-animations

解决方案

您可以将背景角度从 360 设置为 0，同时将旋转从 0 设置为 360。这将使背景保持静止。用于制作背景角度使用的动画CSS.registerProperty。

就像这里：

CSS.registerProperty({
  name: '--deg',
  syntax: '<angle>',
  inherits: false,
  initialValue: '0deg',
});
:root {
  --deg: 0deg;
}
body {
width: 100%;
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
}
#d {
overflow:hidden;
  width: 100px;
  height: 100px;
  position: absolute;
  right:0;
  left:0;
  bottom:0;
  top:0;
  margin:auto;
  background: linear-gradient(var(--deg), red, yellow, green);
  transform-origin: center center;
  animation: rotation 2s linear infinite;
}

@keyframes rotation {
  0% {transform: rotate(0deg); --deg: 360deg}
  100% {transform: rotate(360deg); --deg: 0deg}
}
<div id="d"></div>

推荐阅读