如何使用 css 使圣诞树以不同的颜色闪烁 [关闭]答案

【问题标题】：how to make this php chrismas tree blink with diff colours using css [closed]如何使用 css 使圣诞树以不同的颜色闪烁 [关闭]
【发布时间】：2016-12-28 22:44:54
【问题描述】：

这是一个将产生像圣诞树一样的输出的代码。如何使用 css 让它以不同的颜色闪烁。我是初学者，非常感谢。我被分配了让它闪烁的任务。

<?php

    $i="*";
    $row = 4;
    for($k = 0; $k <3;$k++){
        for($j=1; $j<=$row; $j++){
            echo "<center>$i</center>";
            $i .="**";
        }
        $i="*";
        $row++;
    }

    ?>

【问题讨论】：

圣诞节结束了，为什么是现在？你有点晚了 ;-) 顺便说一句，你有没有尝试过？
“我被分配了让它闪烁的任务。” - 这是“你的”任务，而不是“我们的”；尝试一些东西。这个问题太宽泛了。
PHP 是服务器端，CSS 不是很动态，所以我不认为没有 javascript 也能正常工作。
我认为圣诞老人不在这里，否则他可能会满足您的愿望。
你插入了吗？您是否尝试过将其关闭再打开？

标签： html css

【解决方案1】：

使用下面的 CSS 和 HTML 代码。它可以自动闪烁和改变颜色

<style>
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

p{
    -webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;
    margin-top:-10px;
}

@-webkit-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-moz-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-ms-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-o-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
</style>

<?php

    $i="*";
    $row = 4;
    for($k = 0; $k <3;$k++){
        for($j=1; $j<=$row; $j++){
            echo "<center class='blink''><p>$i</p></center>";
            $i .="**";
        }
        $i="*";
        $row++;
    }

    ?>

【讨论】：

请不要为自己没有努力的用户编写代码。这是作业，可能是家庭作业，OP 应该自己完成。给他们复制和粘贴的答案并不能鼓励学习，是吗？更好的答案是解释一下 CSS 动画并给出一个 basic 示例，然后让 OP 将这些知识应用于树问题。
是的好方法，很抱歉直接回答，以后我会跟进。谢谢
并且 OP 回答了你的答案，就像他们对其他问题所做的那样 stackoverflow.com/q/41361266 - 深思：在将空闲时间给某人之前，请务必先检查他们的记录，我们希望谁他们会很感激的。
我刚醒来，不，我没有复制任何代码，因为我什么都不懂。抱歉，如果看起来是这样，我对这个网站和编程很陌生。我很感激所有的答案。我会尝试自己做。
是的，我没有根据你的需要解释每一行代码，我想，你可以通过一些实际的例子来理解这个简单的代码。