Question

编辑：https://codepen.io/TechTime/pen/NjZOGE这就是我想要实现的目标，每隔几秒随机颜色发生一次。

EDIT2：如何使用多个三角形？我尝试了一些东西，但它没有用。将不胜感激

如果可以改变三角形div的颜色，那么我就会徘徊，这样每隔几秒它会发出一种颜色然后再恢复正常。下面是我的三角代码：

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-up:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-bottom: 500px solid #e6e6e6;
}

我不介意它是否使用css，javascript或jquery。只是它的工作原理！提前谢谢。

Answer 1

已接受的解决方案不符合OP目前要求的所有标准，我相信这个标准确实如此：

随机颜色。
随机时间间隔。
返回初始颜色。
“发光”

我们使用JS将底部边框颜色和转换持续时间更改为随机值。我们还会回复transitionend事件，因此我们不必使用setInterval并且知道颜色之间的转换已完全完成。每个其他转换都返回到默认灰色。通过颜色之间的淡化而不是颜色立即变为下一种颜色来发光。

我通过一个函数完成了这项工作，该函数允许您分配需要动画/过渡的元素和min / max参数来控制颜色变化之间的时间间隔范围。您还会注意到我删除了伪元素并嵌套了常规DIV，因为更改伪元素CSS属性可能会很棘手。

var colorizer = function ( el, min, max ) {

    // @link https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript
    function getHexColor() {
      return "#000000".replace( /0/g, function () {
        return ( ~~( Math.random() * 16 ) ).toString( 16 );
      } );
    }

    // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    function getRandomInt( min, max ) {
      return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
    }

    min = undefined == min ? 250 : min;
    max = undefined == max ? 1500 : max;

    var isDefaultColor = true,
        style          = el.style,
        defaultColor   = style.borderBottomColor,
        color;

    return function ( e ) {
    
      el.offsetWidth; // Reset transition so it can run again.
      
      color                    = isDefaultColor ? getHexColor() : defaultColor;
      isDefaultColor           = !isDefaultColor;
      style.borderBottomColor  = color;
      style.transitionDuration = ( getRandomInt( min, max ) ) + 'ms';

    };

  },
  triangle          = document.querySelector( '.triangle > div' ),
  triangleColorizer = colorizer( triangle, 750, 2000 );

triangle.addEventListener( 'transitionend', triangleColorizer );

// Kick it off!
triangleColorizer();

.triangle {
  width: 5%;
  height: 0;
  padding: 0 0 5% 5%;
  overflow: hidden;
}
.triangle > div {
  width: 0;
  height: 0;
  margin-left: -500px;
  border-right: 500px solid transparent;
  border-left: 500px solid transparent;
  border-bottom: 500px solid lightgray;
  transition: border-bottom-color 1000ms ease-in-out;
}

<div class="triangle">
  <div></div>
</div>

Answer 2

这会每2秒将三角形颜色更改为随机颜色。在第一个函数上，我们迭代一串字母并将其作为随机十六进制代码返回。 x函数创建一个样式标记并将其附加到head标记中，然后切换前一个语句中定义的类randColor。最后，调用setInterval函数每2秒调用一次函数。卸妆功能只是从头部删除样式标记，因此我们不会每2秒追加样式标记。它每2秒更换一次颜色，然后恢复原来的颜色。希望这会有所帮助。

function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }


function remover(){
	$(".style-tag").remove();
}

function x(){
    var style = $('<style class="style-tag">.randColor:after { border-bottom: 500px solid ' + getRandomColor() +'; }</style>');
  $('html > head').append(style);
  $(".triangle-up").toggleClass("randColor");
    
}

$(document).ready(function(){
setInterval(function(){
remover();
x();
}, 2000);




});

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-up:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-bottom: 500px solid #e6e6e6;
  transition: all 0.4s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangle-up"></div>

Answer 3

所以这是非常粗糙的，但我认为这可能的唯一方法是使用jQuery并拥有一堆css类。您无法通过jquery更改:after css规则，因为它不是dom的一部分。但是我们可以做这样的事情（我承认这很乏味，但鉴于你当前的HTML，我看不到另一种方式）。

HTML

<div class="triangle-up blue">

</div>

jquery的

var cachedColorName;

$(document).ready(function() {
setInterval(function(){ 
    var newColor = 'red'; //(here you'd want to randomnly find a color that you have in your css
    changeColor(newColor); 
}, 3000);});

function changeColor(colorName) {
    $('.triangle-up').removeClass(cachedColorName).addClass(colorName);
    cachedColorName = colorName;
}

CSS

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}
.triangle-up:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
}
.triangle-up.blue:after {
  border-bottom: 500px solid blue;
}

.triangle-up.red:after{
  border-bottom: 500px solid red;
}

所以你只是在这里切换不同的类。但这是使random成为你想要的唯一方法（而不是我所做的硬编码red，你可以每次从具有所有css类的集合中以编程方式选择随机颜色随之而来的）。

这是实际行动：

https://jsfiddle.net/5b7wLv3r/2/

编辑：如果您需要帮助随机选择颜色，请告诉我。我可以添加该代码。

编辑2：我为你做了一点聪明

编辑3：找到随机颜色

css

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-up:after {
    content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
}

 .triangle-up.blue:after {
  border-bottom: 500px solid blue;
}

.triangle-up.red:after{
  border-bottom: 500px solid red;
}

.triangle-up.purple:after{
  border-bottom: 500px solid purple;
}


.triangle-up.yellow:after{
  border-bottom: 500px solid yellow;
}

.triangle-up.orange:after{
  border-bottom: 500px solid orange;
}

.triangle-up.green:after{
  border-bottom: 500px solid green;
}

HTML

<div class="triangle-up blue">

</div>

JS

var cachedColorName;

var colorCollection = ['red', 'blue', 'purple', 'yellow', 'orange', 'green']

$(document).ready(function() {
setInterval(function(){ 
var newColor = randomItem(colorCollection); //(here you'd want to randomnly find a color that you have in your css
    changeColor(newColor); 
}, 3000);});

function changeColor(colorName) {
    $('.triangle-up').removeClass(cachedColorName);
    $('.triangle-up').addClass(colorName);
    cachedColorName = colorName;
}

function randomItem(collection) {
return collection[Math.floor(Math.random()*collection.length)];
}

所以基本上，我们在这里有一个集合，我们在其中随机找到一个值，然后将颜色名称传递给我们的changeColor方法。我确实在你的问题中看到你想要改变为随机颜色，然后回到默认值。如果您需要我帮助您，请告诉我，基本上只是一个布尔值，看看您之前是否改为随机。我会在代码中实现这一点，但由于你没有自己尝试，我想留下一些东西让你弄清楚如果是这样，只需更改为默认值。否则，找到随机颜色。

在这里工作：

https://jsfiddle.net/5b7wLv3r/3/

随时间更改三角形div的颜色

3 个答案: