Question

我正在尝试创建探照灯/聚光灯效果，以使用CSS动画突出显示一些文本。 Heres a fiddle

我希望聚光灯的颜色在离光源越远时变得更加半透明（使用颜色渐变）。

由于我的聚光灯是一个倒置的三角形-我似乎无法使用methods outlined here来做到这一点。

有人可以帮助我吗？

CSS：

h1 {
  color: green;
  position: absolute;
}

        body { 
    background-color: black;  
    overflow: hidden; 
    margin: 0;
 }

.spotlight {
      position: relative;
        width: 10vw;
        height: 0vh;
        border-top: 100vh solid rgba(255, 255, 255, 0.25);
        border-left: 12vw solid transparent;
        border-right: 12vw solid transparent;
        background-color: transparent;
        -webkit-transform-origin: 50% 100% 0;
        z-index: 0;
  -webkit-animation: move 7s ease-in-out;
    }

     @-webkit-keyframes move {
      0%  { 
        -webkit-transform: rotate(-30deg) scaleX(0.4);
      }
      50% {
        -webkit-transform: rotate(30deg) scaleX(0.4);
      }
      100% {
        -webkit-transform: rotate(0deg) ;
      }
    }

HTML：

 <html>
    <head>

    </head>
    <body>

      <h1>
      Some text
      </h1>

        <div class="spotlight spot1"></div>

    </body>
    </html>

Answer 1

您可以考虑使用渐变为形状着色，然后依靠一些透视变换来创建三角形效果。

我使用了不同的颜色，因此我们可以清楚地识别它们，并考虑使用伪元素来优化代码：

async setTime (_, { type }, context) {
    const userId = getUserId(context)

    const time = await prisma.createTime({ type })
    let record = {}

    if (type === 'start') {
      record = await prisma.createUserTimeRecord({
        userId,
        timeIds: {
          create: time
        }
      })
    }

    return time
  }
}

h1 {
  color: green;
}

body {
  background-color: black;
  overflow: hidden;
  margin: 0;
}

body:before {
  content: "";
  position: absolute;
  left: 8vw;
  top: 0;
  bottom: -20px;
  width: 12vw;
  background: linear-gradient(to bottom, blue 30%, yellow);
  z-index: -1;
  animation: move 7s ease-in-out forwards;
  transform-origin: bottom;
}

@keyframes move {
  0% {
    transform: perspective(100px) rotateX(-30deg) rotate(-30deg) scaleX(0.4);
  }
  50% {
    transform: perspective(100px) rotateX(-30deg) rotate(30deg) scaleX(0.4);
  }
  100% {
    transform: perspective(100px) rotateX(-30deg) rotate(0deg) scaleX(1);
  }
}

另一个想法是考虑多个背景以避免透视的复杂性：

<h1>
  Some text
</h1>

h1 {
  color: green;
}

body {
  background-color: black;
  overflow: hidden;
  margin: 0;
}

body:before {
  content: "";
  position: absolute;
  left: 0;
  top:0;
  bottom: -20px;
  width: 30vw;
  background: 
     linear-gradient(to bottom left ,transparent 49%,black 50%) left /12vw 100%,
     linear-gradient(to bottom right,transparent 49%,black 50%) right/12vw 100%,
     linear-gradient(to bottom, blue 30%, yellow);
  background-repeat:no-repeat;
  z-index: -1;
  animation: move 7s ease-in-out;
  transform-origin: bottom;
}

@keyframes move {
  0% {
    transform:rotate(-30deg) scaleX(0.4);
    top: -200px;
  }
  50% {
    transform:rotate(30deg) scaleX(0.4);
    top: -200px;
  }

}

top / bottom的负值用于确保元素像上一个问题一样填充所有空间。

向边框添加颜色渐变（直角三角形）？

1 个答案: