CSS3 - 实现背景颜色、透明度动态过渡变化效果（关键帧动画）

2019-08-25 发布：hangge 阅读：7496

有时我们想要让某个元素的背景能够逐渐改变颜色，使其更加醒目，可以通过 CSS3 关键帧动画来实现。下面通过样例进行演示。

1，背景色动态变化

（1）效果图

页面上 div 初始背景色为黄色，然后逐渐变成橙色（整个过程持续 2 秒）
接着又从橙色逐渐变为黄色（整个过程持续 2 秒）
不断重复上面两个动画效果。

（2）样例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hangge.com</title>
</head>
<style>
    body {
        padding: 20px;
    }

    #block {
        width: 100px;
        height: 100px;
        animation: yellow-orange 2s infinite;
    }
    
    @keyframes yellow-orange {
        0% {
            background: yellow;
        }
        50% {
            background: orange;
        }
        100% {
            background: yellow;
        }
    }
</style>
<body>
    <div id="block"></div>
</body>
</html>

（3）上面的 CSS 还可以简化成如下代码：

#block {
    width: 100px;
    height: 100px;
    animation: yellow-orange 1s infinite alternate;
}

@keyframes yellow-orange {
    0% {
        background: yellow;
    }
    100% {
        background: orange;
    }
}

2，背景色透明度动态变化

（1）效果图

页面上 div 初始背景是透明的，然后逐渐变成黄色（整个过程持续 1 秒）
接着又从黄色逐渐变为透明（整个过程持续 1 秒）
不断重复上面两个动画效果。

（2）样例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hangge.com</title>
</head>
<style>
    body {
        padding: 20px;
    }

    #block {
        width: 100px;
        height: 100px;
        animation: yellow-twinkle 1s infinite alternate;
    }

    @keyframes yellow-twinkle{
        0% {
            background: rgba(255,255,0,0);
        }
        100% {
            background: rgba(255,255,0,1);
        }
    }
</style>
<body>
    <div id="block"></div>
</body>
</html>