动态效果图在每个时间点上，动画会应用不同的颜色和阴影效果。具体来说：在 0% 时，文本的颜色为红色（#ff0000），

在每个时间点上，动画会应用不同的颜色和阴影效果。具体来说：

在 0% 时，文本的颜色为红色（#ff0000），并且有红色的阴影效果。
在 25% 时，文本的颜色变为橙色（#ff8000），并且有橙色的阴影效果。
在 50% 时，文本的颜色变为黄色（#ffff00），并且有黄色的阴影效果。
在 75% 时，文本的颜色变为绿色（#00ff00），并且有绿色的阴影效果。

在 100% 时，文本的颜色变为蓝色（#0000ff），并且有蓝色的阴影效果。

 @keyframes rainbow {
	         0% {
		color: #ff0000;
                            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
                    }
                    25% {
                            color: #ff8000;
                            text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000;
                    }
                    50% {
                            color: #ffff00;
                            text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;
                    }
                    75% {
                            color: #00ff00;
                            text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
                    }
                    100% {
                            color: #0000ff;
                            text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;
                    }
            }

定义一个名为 "rainbow" 的动画，并设置其持续时间为 5 秒。同时，它还指定动画的速度曲线为 "ease-in-out"，表示动画在开始和结束时速度较慢，中间速度较快。最后，通过设置 "infinite" 关键字，该动画将无限次重复播放。

         animation: rainbow 5s ease-in-out infinite;

效果图：

代码：

       <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

                body {
                        background: black;
                        color: white;
                        font-family: 'Open Sans', sans-serif;
                        text-align: center;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                }

                h1 {
                        font-size: 8em;
                        margin: 100px auto;
                        animation: rainbow 5s ease-in-out infinite;

                }

                @keyframes rainbow {
                        0% {
                                color: #ff0000;
                                text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
                        }
                        25% {
                                color: #ff8000;
                                text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000;
                        }
                        50% {
                                color: #ffff00;
                                text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;
                        }
                        75% {
                                color: #00ff00;
                                text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
                        }
                        100% {
                                color: #0000ff;
                                text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;
                        }
                }
        </style>
</head>
<body>
    <h1>你好</h1>
</body>
</html>