[if lt IE 9]>

网站首页文章转载

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

张帅2020-01-09 52人围观
简介 有时我们想要让某个元素的背景能够逐渐改变颜色, 使其更加醒目,可以通过 CSS3 关键帧动画来实现。下面通过样例进行演示。 1,背景色动态变化 (1)效果图 页面上 div 初始背景色为黄色,然后逐渐变成橙色(整个过程持续 2 秒) 接着又从橙色逐渐变为黄色......

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

    有时我们想要让某个元素的背景能够逐渐改变颜色, 使其更加醒目,可以通过 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>
Top