Ich versuche, ein Zahnrad mit CSS (einem SVG-Zahnrad) zu drehen.

Ich habe mich jedoch gefragt, ob es möglich ist, den Gradienten in einem konstanten Winkel zu halten, damit er realistischer erscheint.

Z.B. cog dreht 20deg mithilfe von CSS-Transformationen, aber der Farbverlauf bleibt bei 0deg, sodass es so aussieht, als ob es eine konstante Lichtquelle gibt.

0
Graham Ritchie 22 Feb. 2020 im 12:02

3 Antworten

Beste Antwort

Sie können den Hintergrundwinkel einfach von 360 auf 0 animieren, während die Drehung von 0 auf 360 animiert wird. Dadurch bleibt der Hintergrund statisch. Verwenden Sie CSS.registerProperty, um eine Animation des Hintergrundwinkels verfügbar zu machen.

Wie hier:

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>
1
Yosef Tukachinsky 22 Feb. 2020 im 10:31

Es stellt sich also heraus, dass Sie den Farbverlauf in einem SVG mit CSS nicht drehen können (oder zumindest konnte ich ihn nicht finden, wenn Sie können).

Stattdessen war die Verwendung der nativen SVG-Rotation auf dem Gradienten die Lösung.

Der Schlüssel besteht darin, Folgendes in <linearGradient> einzufügen

    <animateTransform
  attributeName="gradientTransform"
  type="rotate"
  from="0 250 250"
  to="360 250 250"
  dur="10s"
  repeatCount="indefinite"/>  
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cog {
  width: 500px;
  height: 500px;
  animation: rotation-0 10s linear infinite;
}


@keyframes rotation-0 {
  0% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}
<svg class="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" xml:space="preserve">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
      <stop offset="20%" style="stop-color:#28b493;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#007c9b;stop-opacity:1" />
      <animateTransform
  attributeName="gradientTransform"
  type="rotate"
  from="0 22 22"
  to="360 22 22"
  dur="10s"
  repeatCount="indefinite"/>
    </linearGradient>
  </defs>

	<path fill="url(#grad)" d="M44,24.707v-5.5l-6.574-2.738c-0.184-0.516-0.377-1.015-0.613-1.505l2.656-6.606l-3.891-3.889l-6.549,2.696   c-0.498-0.242-1.008-0.445-1.535-0.634L24.707,0h-5.5l-2.718,6.509c-0.548,0.194-1.075,0.397-1.595,0.646L8.357,4.528L4.469,8.416   l2.665,6.478c-0.259,0.532-0.467,1.074-0.667,1.633L0,19.293v5.5l6.472,2.697c0.199,0.559,0.413,1.1,0.67,1.633l-2.615,6.52   l3.888,3.889l6.494-2.676c0.522,0.248,1.054,0.447,1.601,0.635L19.293,44h5.5l2.721-6.543c0.523-0.193,1.039-0.396,1.533-0.633   l6.596,2.643l3.889-3.889l-2.709-6.562c0.232-0.494,0.418-0.994,0.602-1.504L44,24.707z M21.957,31.583   c-5.289,0-9.582-4.292-9.582-9.583s4.293-9.583,9.582-9.583c5.292,0,9.583,4.293,9.583,9.583S27.248,31.583,21.957,31.583z"/>
</svg>
1
Graham Ritchie 22 Feb. 2020 im 10:46
.box-cirlce {width:100%; position:relative;}

.cog-small {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('https://ladaworld.com/299-large_default/differential-24-splines-side-gear.jpg') center center no-repeat;
    background-size: contain;
}

#cog {
	-webkit-animation: cog 5s infinite;			
	-moz-animation: cog 5s infinite;
	-ms-animation: cog 5s infinite; 			
	animation: cog 5s infinite;
	-webkit-animation-timing-function: linear;	
	-moz-animation-timing-function: linear;		
	-ms-animation-timing-function: linear;
	animation-timing-function: linear	
}
@-webkit-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
@-moz-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
@-ms-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
@keyframes cog {
100%{ 
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg)
}
}
<div class="box-cirlce"><div class="cog-small" id="cog"></div></div>
0
alirizvi19 22 Feb. 2020 im 09:34