Question

我需要知道如何制作一个包含颜色代码的CSS类连续淡入不同的颜色。如果您的解决方案适用于wordpress，那么它就是＆＃39;更好。

Answer 1

您可以使用jquery。试试这个简单的例子，根据需要改变代码。

$(document).ready(function() {  
 setInterval(function() {
    $('body').animate( { color: 'red' }, 1000)
    .animate( { color: 'green' }, 1000); 
    }, 1000);

 });

JSFiddle

Answer 2

对于现代浏览器，您可以使用@keyframes。根据您需要支持的浏览器，此示例可能还需要添加供应商前缀。此外，表现会有所不同：

/* rainbow song colours */
@keyframes fadeBetween { 
    0% {background-color: red;}
    15% {background-color: yellow;}
    30% {background-color: pink;}
    45% {background-color: green;}
    60% {background-color: orange;}
    75% {background-color: purple;}
    100% {background-color: blue;}
}

.colour-fade {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: fadeBetween 35s infinite;
}

<div class="colour-fade"></div>

几秒钟后更改CSS类颜色

2 个答案: