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

Question

I'm trying to create a searchlight/ spotlight effect that will highlight some text using CSS animations. 我正在尝试创建探照灯/聚光灯效果，以使用CSS动画突出显示一些文本。 Heres a fiddle 这是一个小提琴

I would like to have the colouring of the spotlight become more translucent the further away from the light source (using a colour gradient). 我希望聚光灯的颜色在离光源越远时变得更加半透明（使用颜色渐变）。

Due to my spotlight being a upside down triangle - I cannot seem to do this using the methods outlined here . 由于我的聚光灯是一个倒置的三角形-我似乎无法使用此处概述的方法来执行此操作。

Would somebody be able to help me with this? 有人可以帮我这个忙吗？

CSS: 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：

 <html>
    <head>

    </head>
    <body>

      <h1>
      Some text
      </h1>

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

    </body>
    </html>

Answer 1

You can consider gradient to color the shape then rely on some persepctive transformation to create the triangle effect. 您可以考虑使用渐变色为形状着色，然后依靠一些透视变换来创建三角形效果。

I used different colors so we can clearly identify them and I considerd pseudo element to optimize the code: 我使用了不同的颜色，因此我们可以清楚地识别它们，并考虑使用伪元素来优化代码：

 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>

Another idea is to consider multiple background to avoid the complexity of perspective: 另一个想法是考虑多个背景以避免透视的复杂性：

 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; } }

 <h1> Some text </h1>

The negative values of top/bottom are used to make sure the element fill all the spaces like you want in your previous question. top / bottom的负值用于确保元素像上一个问题一样填充所有空间。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-06-09 20:56:11

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-06-09 20:56:11

解决方案1
1 已采纳 2019-06-09 20:56:11