如何为圆形创建渐变边框动画？

huangapple
go评论115阅读模式
英文:

How do I animate a gradient border of a circle?

问题

I have unsuccessfully been trying to animate a linear gradient border on a div. I took inspiration from this image. I want the border to be transparent between the two gradients, like in the picture. But I also want the gradient to look like it is moving in a circle around the circle div.

我一直在尝试对 div 上的线性渐变边框进行动画处理，但没有成功。我从 这个图片 中获取了灵感。我希望边框在两个渐变之间是透明的，就像图片中那样。但我还希望渐变看起来像是围绕 div 上的圆形移动。

I tried making the circle rotate in an animation, which works but I cannot add a gradient to a border-color property so instead I used an ::after property to add a circle behind the main div so that it looks like a circle. All of this works with a on the background but the main problem from here is that I cannot get the gaps between 2 different gradient borders on opposite sides of the circle.

我尝试通过动画使圆形旋转，这个方法有效，但我无法将渐变添加到 border-color 属性，所以我使用了 ::after 属性在主 div 后面添加了一个圆，以使它看起来像一个圆。这一切都在背景上运行，但从这里主要问题是我无法在圆的相对两侧获取两个不同渐变边框之间的间隙。

scss:

  1. #home-page {
  2. 	i {
  3. 		position: absolute;
  4. 		color: $medium-red;
  5. 		top: 50%;
  6. 		left: 50%;
  7. 		font-size: 400px;
  8. 		animation: spin 4s linear infinite;
  9. 		border-radius: 50%;
  11. 		&::after {
  12. 			content: "";
  13. 			background: linear-gradient(60deg, $beige, $light-red);
  14. 			position: absolute;
  15. 			top: -3px;
  16. 			left: -3px;
  17. 			right: -3px;
  18. 			bottom: -3px;
  19. 			border-radius: 50%;
  20. 			z-index: -1;
  21. 		}
  22. 	}
  23. }
  25. @keyframes spin {
  26. 	0% {
  27. 		transform: translate(-50%, -50%);
  28. 	}
  30. 	100% {
  31. 		transform: translate(-50%, -50%) rotate(360deg);
  32. 	}
  33. }

html:

  1. <div id="homepage">
  2.     <i>(font awesome icon of a circle)</i>
  3. </div>
英文:

I have unsuccessfully been trying to animate a linear gradient border on a div. I took inspiration from
this image. I want the border to be transparent between the two gradients, like in the picture. But I also want the gradient to look like it is moving in a circle around the circle div.

I tried making the circle rotate in an animation, which works but I cannot add a gradient to a border-color property so instead I used an ::after property to add a circle behind the main div so that it looks like a circle. All of this works with a on the background but the main problem from here is that I cannot get the gaps between 2 different gradient borders on opposite sides of the circle.

scss:

  1. #home-page {
  2. 	i {
  3. 		position: absolute;
  4. 		color: $medium-red;
  5. 		top: 50%;
  6. 		left: 50%;
  7. 		font-size: 400px;
  8. 		// border-width: 2px;
  9. 		// border-style: solid;
  10. 		animation: spin 4s linear infinite;
  11. 		// border-color: transparent $beige;
  12. 		border-radius: 50%;
  14. 		&amp;::after {
  15. 			content: &quot;&quot;;
  16. 			background: linear-gradient(60deg, $beige, $light-red);
  17. 			position: absolute;
  18. 			top: -3px;
  19. 			left: -3px;
  20. 			right: -3px;
  21. 			bottom: -3px;
  22. 			border-radius: 50%;
  23. 			z-index: -1;
  24. 		}
  25. 	}
  26. }
  28. @keyframes spin {
  29. 	0% {
  30. 		transform: translate(-50%, -50%);
  31. 	}
  33. 	100% {
  34. 		transform: translate(-50%, -50%) rotate(360deg);
  35. 	}
  36. }

html:

  1. &lt;div id=&quot;homepage&quot;&gt;
  2.     &lt;i&gt;(font awesome icon of a circle)&lt;/i&gt;
  3. &lt;/div&gt;

答案1

得分: 0

以下是您提供的HTML和CSS代码的翻译：

HTML

  1. <div id="homepage">
  2.     <div class="circle-gradient">
  3.     </div>
  4. </div>

CSS:

  1. .circle-gradient {
  2.     color: $medium-red;
  3.     animation: spin 4s linear infinite;
  4.     border-radius: 50%;
  5.     position: relative;
  6.     height: 300px;
  7.     width: 300px;
  8.     background: linear-gradient(60deg, $beige, $light-red);
  9.     border-radius: 50%;
  10.     z-index: -1;
  11.     position: relative;
  12. }
  14. .circle-gradient::after {
  15.     content: '';
  16.     position: absolute;
  17.     width: 100%;
  18.     height: 100%;
  19.     background-color: white;
  20.     border-radius: 50%;
  21.     z-index: 999;
  22.     border-inline: 5px solid rgba(0, 0, 0, 0.02);
  23. }
  25. @keyframes spin {
  26.     0% {
  27.         transform: translate(1%, 1%);
  28.     }
  30.     100% {
  31.         transform: translate(1%, 1%) rotate(360deg);
  32.     }
  33. }

在此链接上测试它的工作原理这里。

英文:

HTML

  1. &lt;div id=&quot;homepage&quot;&gt;
  2.     &lt;div class=&quot;circle-gradient&quot;&gt;
  3.     &lt;/div&gt;
  4. &lt;/div&gt;

CSS:

  1. .circle-gradient {
  2.     color: $medium-red;
  3.     animation: spin 4s linear infinite;
  4.     border-radius: 50%;
  5.     position: relative;
  6.     height: 300px;
  7.     width: 300px;
  8.     background: linear-gradient(60deg, $beige, $light-red);
  9.     border-radius: 50%;
  10.     z-index: -1;
  11.     position: relative;
  12.     &amp;:after{
  13.       content: &#39;&#39;;
  14.       position: absolute;
  15.       width: 100%;
  16.       height: 100%;
  17.       background-color: white;
  18.       border-radius: 50%;
  19.       z-index: 999;
  20.       border-inline: 5px solid rgba(0,0,0,0.02);
  21.     }
  22. }
  24. @keyframes spin {
  25.   0% {
  26.     transform: translate(1%, 1%);
  27.   }
  29.   100% {
  30.     transform: translate(1%, 1%) rotate(360deg);
  31.   }
  32. }

test how it works HERE

答案2

得分: 0

以下是翻译好的部分：

  1. * { margin: 0; }
  3. body { background: #1a0a0a; }
  5. .circle {
  6.   position: relative;
  7.   width: 10rem;
  8.   aspect-ratio: 1;
  9.   border-radius: 50%;
  10.   background: url("https://i.stack.imgur.com/p2rd3.png") no-repeat center / 60%;
  11. }
  13. .circle svg {
  14.   position: absolute;
  15.   animation: arcRotation 2s linear infinite ;
  16. }
  18. @keyframes arcRotation {
  19.   100% { rotate: 360deg; }
  20. }
  1. <div class="circle">
  2.   <svg id="arc1" viewBox="0 0 1 1">
  3.     <defs>
  4.       <linearGradient id="gradient1" gradientUnits="userSpaceOnUse" x1="1" y1="1" x2="0" y2="1">
  5.         <stop offset=".42" stop-color="#fff" />
  6.         <stop offset=".58" stop-color="#f00" />
  7.       </linearGradient>
  8.     </defs>
  9.     <path stroke="url(#gradient1)" stroke-width="0.01" fill="none" d="M 0.74 0.0843078061834695 A 0.48 0.48 0 0 0 0.2600000000000001 0.08430780618346945"></path>
  10.   </svg>
  11.   <svg id="arc2" viewBox="0 0 1 1">
  12.     <defs>
  13.       <linearGradient id="gradient2" gradientUnits="userSpaceOnUse" x1="1" y1="1" x2="0" y2="1">
  14.         <stop offset=".42" stop-color="#f00" />
  15.         <stop offset=".58" stop-color="#fff" />
  16.       </linearGradient>
  17.     </defs>
  18.     <path stroke="url(#gradient2)" stroke-width="0.01" fill="none" d="M 0.37576685835079 0.9636443966187528 A 0.48 0.48 0 0 0 0.62423314164921 0.9636443966187528"></path>
  19.   </svg>
  20. </div>
  1. // https://stackoverflow.com/a/18473154/383904
  2. const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
  3.   const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  4.   return {
  5.     x: centerX + (radius * Math.cos(angleInRadians)),
  6.     y: centerY + (radius * Math.sin(angleInRadians))
  7.   };
  8. };
  10. const describeArc = (x, y, radius, startAngle, endAngle) => {
  11.   const start = polarToCartesian(x, y, radius, endAngle);
  12.   const end = polarToCartesian(x, y, radius, startAngle);
  13.   const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  14.   const d = [
  15.     "M", start.x, start.y,
  16.     "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  17.   ].join(" ");
  18.   return d;
  19. };
  21. document.querySelector("#arc1 path").setAttribute("d", describeArc(0.5, 0.5, 0.48, -30, 30));
  22. document.querySelector("#arc2 path").setAttribute("d", describeArc(0.5, 0.5, 0.48, 180 - 15, 180 + 15));
英文:

You could use SVG for the gradient arcs like:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * { margin: 0; }
  3. body { background: #1a0a0a; }
  5. .circle {
  6.   position: relative;
  7.   width: 10rem;
  8.   aspect-ratio: 1;
  9.   border-radius: 50%;
  10.   background: url(&quot;https://i.stack.imgur.com/p2rd3.png&quot;) no-repeat center / 60%;
  11. }
  13. .circle svg {
  14.   position: absolute;
  15.   animation: arcRotation 2s linear infinite ;
  16. }
  18. @keyframes arcRotation {
  19.   100% { rotate: 360deg; }
  20. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;circle&quot;&gt;
  2.   &lt;svg id=&quot;arc1&quot; viewBox=&quot;0 0 1 1&quot;&gt;
  3.     &lt;defs&gt;
  4.       &lt;linearGradient id=&quot;gradient1&quot; gradientUnits=&quot;userSpaceOnUse&quot; x1=&quot;1&quot; y1=&quot;1&quot; x2=&quot;0&quot; y2=&quot;1&quot;&gt;
  5.         &lt;stop offset=&quot;.42&quot; stop-color=&quot;#fff&quot; /&gt;
  6.         &lt;stop offset=&quot;.58&quot; stop-color=&quot;#f00&quot; /&gt;
  7.       &lt;/linearGradient&gt;
  8.     &lt;/defs&gt;
  9.     &lt;path stroke=&quot;url(#gradient1)&quot; stroke-width=&quot;0.01&quot; fill=&quot;none&quot; d=&quot;M 0.74 0.0843078061834695 A 0.48 0.48 0 0 0 0.2600000000000001 0.08430780618346945&quot;&gt;&lt;/path&gt;
  10.   &lt;/svg&gt;
  11.   &lt;svg id=&quot;arc2&quot; viewBox=&quot;0 0 1 1&quot;&gt;
  12.     &lt;defs&gt;
  13.       &lt;linearGradient id=&quot;gradient2&quot; gradientUnits=&quot;userSpaceOnUse&quot; x1=&quot;1&quot; y1=&quot;1&quot; x2=&quot;0&quot; y2=&quot;1&quot;&gt;
  14.         &lt;stop offset=&quot;.42&quot; stop-color=&quot;#f00&quot; /&gt;
  15.         &lt;stop offset=&quot;.58&quot; stop-color=&quot;#fff&quot; /&gt;
  16.       &lt;/linearGradient&gt;
  17.     &lt;/defs&gt;
  18.     &lt;path stroke=&quot;url(#gradient2)&quot; stroke-width=&quot;0.01&quot; fill=&quot;none&quot; d=&quot;M 0.37576685835079 0.9636443966187528 A 0.48 0.48 0 0 0 0.62423314164921 0.9636443966187528&quot;&gt;&lt;/path&gt;
  19.   &lt;/svg&gt;
  20. &lt;/div&gt;

<!-- end snippet -->

PS, the &lt;path&gt; elements d attribute was generated thanks to this snippet:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

  1. // https://stackoverflow.com/a/18473154/383904
  2. const polarToCartesian = (centerX, centerY, radius, angleInDegrees) =&gt; {
  3.   const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  4.   return {
  5.     x: centerX + (radius * Math.cos(angleInRadians)),
  6.     y: centerY + (radius * Math.sin(angleInRadians))
  7.   };
  8. };
  10. const describeArc = (x, y, radius, startAngle, endAngle) =&gt; {
  11.   const start = polarToCartesian(x, y, radius, endAngle);
  12.   const end = polarToCartesian(x, y, radius, startAngle);
  13.   const largeArcFlag = endAngle - startAngle &lt;= 180 ? &quot;0&quot; : &quot;1&quot;;
  14.   const d = [
  15.     &quot;M&quot;, start.x, start.y,
  16.     &quot;A&quot;, radius, radius, 0, largeArcFlag, 0, end.x, end.y
  17.   ].join(&quot; &quot;);
  18.   return d;
  19. };
  21. document.querySelector(&quot;#arc1 path&quot;).setAttribute(&quot;d&quot;, describeArc(0.5, 0.5, 0.48, -30, 30));
  22. document.querySelector(&quot;#arc2 path&quot;).setAttribute(&quot;d&quot;, describeArc(0.5, 0.5, 0.48, 180 - 15, 180 + 15));

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月3日 03:23:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/76600466.html
  • border
  • css
  • html
  • linear-gradients
  • sass
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定