使用CSS3实现背景颜色渐变效果


今天看到一个网站的背景色有一个好看的渐变效果,检查元素看网站源代码时才知道是用CSS3@keyframes规则写的,随后自己也写了个demo页面,源代码如下:

<!DOCTYPE html>  
<html lang="zh">

<head>  
    <meta charset="UTF-8">
    <title>使用CSS3实现背景色渐变</title>

    <style>
        .test {
            width: 100%;
            height: 300px;
            color: green;
            -webkit-animation: rainbow 60s infinite;
            animation: rainbow 60s infinite;
        }

        @-webkit-keyframes rainbow {
            0%,
            100% {
                background-color: #8BC34A
            }
            16% {
                background-color: #80CBC4
            }
            32% {
                background-color: #FF7042
            }
            48% {
                background-color: #9C27B0
            }
            64% {
                background-color: #E57373
            }
        }

        @keyframes rainbow {
            0%,
            100% {
                background-color: #8BC34A
            }
            16% {
                background-color: #80CBC4
            }
            32% {
                background-color: #FF7042
            }
            48% {
                background-color: #9C27B0
            }
            64% {
                background-color: #E57373
            }
        }
    </style>
</head>

<body>  
    <div class="test"></div>
</body>

</html>  

网站的预览效果在这里:http://equinusocio.github.io/material-theme/



转载请注明:闪烁之狐 » 使用CSS3实现背景颜色渐变效果

分享到:
主题颜色面板