如何实现几乎像灯泡一样的发光效果？

Question

我有一个容器，其边框在其周围移动，效果很好。我需要做的最后一件事是实现非常像灯泡的发光效果。我将在下面发布它的图像。我不知道如何实现这一点：

到目前为止，我已经尝试了以下代码，我设置了颜色以及模糊和亮度效果，但这些代码没有达到我想要的效果。我不知道如何相互应用多个图层，因为这可能是可行的方法。我希望你能帮助我。

import React, { useState } from 'react';
import styled, { createGlobalStyle, keyframes } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    display: grid;
    place-content: center;
    gap: 2rem;
    min-height: 100vh;
    background-image: conic-gradient(
      at 125% 50%,
      #b78cf7,
      #ff7c94,
      #ffcf0d,
      #ff7c94,
      #b78cf7
    );
    font-family: system-ui;
  }
`;

const continuousDashOffsetAnimation = keyframes`
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -50px;
  }
`;

const Box = styled.div`
  cursor: pointer;
  font-size: 2rem;
  font-family: inherit;
  font-weight: 700;
  color: hsl(320, 40%, 40%);
  background-color: hsl(349 100% 95%);
  width: 510px;
  height: 100px;
  border: 0;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;

  --glow-line-color: #FFD600;
  --glow-line-thickness: 2px;
  --glow-line-length: ${props => (props.speed > 15 ? "30px" : "10px")};
  --glow-blur-color: #FFD600;
  --glow-blur-size: 5px;
  --glow-offset: 0px;
  --animation-speed: ${props => (props.speed > 15 ? "500ms" : "1500ms")};
  --container-offset: 100px;
  --intense-glow-size: 15px;
  position: relative;

  .glow-container {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--container-offset) / -2);
    width: calc(100% + var(--container-offset));
    height: calc(100% + var(--container-offset));
    opacity: 1;
  }

  .glow-blur, .glow-line {
    width: calc(100% - var(--container-offset) + var(--glow-offset));
    height: calc(100% - var(--container-offset) + var(--glow-offset));
    x: calc((var(--container-offset) / 2) + calc(var(--glow-offset) / -2));
    y: calc((var(--container-offset) / 2) + calc(var(--glow-offset) / -2));
    fill: transparent;
    stroke: black;
    stroke-width: 5px;
    stroke-dasharray: var(--glow-line-length) calc(50px - var(--glow-line-length));
    animation: ${continuousDashOffsetAnimation} var(--animation-speed) linear infinite;
  }

  .glow-line {
    stroke: var(--glow-line-color);
    stroke-width: var(--glow-line-thickness);
  }

  .glow-blur {
    filter: 
      blur(var(--glow-blur-size)) 
      brightness(5.5); 
    stroke: var(--glow-blur-color);
    stroke-width: var(--glow-blur-size);
  }

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(255,214,0,0.6) 0%, transparent 70%);
    filter: blur(var(--intense-glow-size));
    z-index: -1;
  }
`;

const App = () => {
  const [speed, setSpeed] = useState(10); // Initially set to 10 as an example
  
  return (
    <>
      <GlobalStyle />
      <Box speed={speed}>
        Hi there 👋
        <svg className="glow-container">
          <rect rx="1.25rem" pathLength="100" strokeLinecap="round" className="glow-blur"></rect>
          <rect rx="1.25rem" pathLength="100" strokeLinecap="round" className="glow-line"></rect>
        </svg>
        <button onClick={() => setSpeed(prevSpeed => (prevSpeed > 15 ? 10 : 20))}>
          Toggle Speed
        </button>
      </Box>
    </>
  );
}

export default App;

Answer 1

import React from 'react';
import styled, { createGlobalStyle, keyframes } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    display: grid;
    place-content: center;
    gap: 2rem;
    min-height: 100vh;
    background-image: conic-gradient(
      at 125% 50%,
      #b78cf7,
      #ff7c94,
      #ffcf0d,
      #ff7c94,
      #b78cf7
    );
    font-family: system-ui;
  }
`;

const continuousDashOffsetAnimation = keyframes`
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -50px;
  }
`;

const Container = styled.div`
  position: relative;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(
      ellipse,
      rgba(255, 255, 255, 0.15),
      transparent 50%
    );
    opacity: 0.8;
    filter: blur(30px);
    animation: ${continuousDashOffsetAnimation} 2s linear infinite;
  }
`;

const GlowEffect = () => {
  return (
    <div>
      <GlobalStyle />
      <Container />
    </div>
  );
};

export default GlowEffect;

用于为容器创建样式的样式组件库。我们使用具有 before 伪元素的 Container 组件来创建发光效果。之前的元素具有径向渐变和模糊以实现发光的外观。

您可以调整宽度、高度、盒子阴影、不透明度、模糊和动画设置等属性，以微调发光效果以匹配您想要的结果。