CSS3 - 实现背景颜色、透明度动态过渡变化效果（关键帧动画）
作者：hangge | 2019-08-25 08:10
有时我们想要让某个元素的背景能够逐渐改变颜色， 使其更加醒目，可以通过 CSS3 关键帧动画来实现。下面通过样例进行演示。
（2）样例代码
（3）上面的 CSS 还可以简化成如下代码：
（2）样例代码
1，背景色动态变化
（1）效果图
- 页面上 div 初始背景色为黄色，然后逐渐变成橙色（整个过程持续 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 秒）
- 不断重复上面两个动画效果。
<!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>
全部评论（0）