[if lt IE 9]>

网站首页文章转载

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

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

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

2019-08-25 发布：hangge 阅读：1016
    有时我们想要让某个元素的背景能够逐渐改变颜色， 使其更加醒目，可以通过 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>
分享到QQ空间新浪微博人人网腾讯微博网易微博0
Top