CSS @keyframes 动画:颜色变化、背景旋转与放大缩小

在CSS中,@keyframes 是一个强大的工具,它允许我们创建复杂的动画效果。今天,我们将一起探索如何使用 @keyframes 来实现颜色变化、背景旋转以及放大缩小的动画效果。

动画会在 2 秒内循环播放,并在不同的时间点改变盒子的背景颜色和变换(旋转和缩放)。

  • 在 0% 的时间点,盒子的背景颜色是绿色(#4CAF50),没有进行旋转和缩放。
  • 在 25% 的时间点,盒子的背景颜色变为红色(#F44336),同时旋转了 90 度并放大了 10%。
  • 在 50% 的时间点,盒子的背景颜色变为绿色(#0F9D58),旋转了 180 度并回到了初始大小。
  • 在 75% 的时间点,盒子的背景颜色变为蓝色(#00BCD4),旋转了 270 度并再次放大了 10%。
  • 在 100% 的时间点(也就是动画结束时),盒子的背景颜色回到了初始的绿色(#4CAF50),旋转了 360 度(即回到初始位置)并回到了初始大小。

一、HTML 结构

html 复制代码
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>使用 @keyframes 创建动画</title>  
<style>  
    /* CSS 样式和关键帧定义将放在这里 */  
</style>  
</head>  
<body>  
  
<div class="animated-box"></div>  
  
</body>  
</html>

二、CSS 样式与 @keyframes 动画

html 复制代码
<style>  
    .animated-box {  
        width: 100px;  
        height: 100px;  
        background-color: #4CAF50;  
        border-radius: 50%; /* 圆形盒子 */  
        margin: 50px auto; /* 居中显示 */  
        animation: colorRotateScale 2s infinite linear; /* 应用动画 */  
    }  
  
    /* 定义关键帧动画 */  
    @keyframes colorRotateScale {  
        0% {  
            background-color: #4CAF50; /* 初始颜色 */  
            transform: rotate(0deg) scale(1); /* 初始旋转角度和大小 */  
        }  
        25% {  
            background-color: #F44336; /* 颜色变化 */  
            transform: rotate(90deg) scale(1.1); /* 旋转90度并放大 */  
        }  
        50% {  
            background-color: #0F9D58; /* 颜色变化 */  
            transform: rotate(180deg) scale(1); /* 旋转180度并回到初始大小 */  
        }  
        75% {  
            background-color: #00BCD4; /* 颜色变化 */  
            transform: rotate(270deg) scale(1.1); /* 旋转270度并放大 */  
        }  
        100% {  
            background-color: #4CAF50; /* 回到初始颜色 */  
            transform: rotate(360deg) scale(1); /* 旋转360度并回到初始大小 */  
        }  
    }  
</style>

在这个CSS样式中,我们定义了一个名为 colorRotateScale@keyframes 动画。这个动画会在 2 秒内完成一个循环,并且会无限次地重复(infinite)。我们使用 linear 动画缓动函数,确保动画在整个周期内的速度是均匀的。

动画的效果包括:

  • 颜色变化:从绿色(#4CAF50)到红色(#F44336),再到绿色(#0F9D58),最后到蓝色(#00BCD4),并最终回到绿色(#4CAF50)。
  • 背景旋转:从 0 度开始,每过 25% 的时间,就旋转 90 度,直到完成 360 度的旋转。
  • 放大缩小:在动画过程中,盒子会在旋转 90 度和 270 度时稍微放大(1.1 倍),而在其他时间点则保持原始大小。

完整例程

html 复制代码
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Keyframe Animation Example</title>  
<style>  
  .animated-box {  
    width: 100px;  
    height: 100px;  
    background-color: #4CAF50;  
    border-radius: 50%; /* 圆形盒子 */  
    margin: 50px auto; /* 居中显示 */  
    animation: colorRotateScale 2s infinite; /* 应用动画 */  
  }  
  
  /* 定义关键帧动画 */  
  @keyframes colorRotateScale {  
    0% {  
      background-color: #4CAF50; /* 初始颜色 */  
      transform: rotate(0deg) scale(1); /* 初始旋转角度和大小 */  
    }  
    25% {  
      background-color: #F44336; /* 颜色变化 */  
      transform: rotate(90deg) scale(1.1); /* 旋转90度并放大 */  
    }  
    50% {  
      background-color: #0F9D58; /* 颜色变化 */  
      transform: rotate(180deg) scale(1); /* 旋转180度并回到初始大小 */  
    }  
    75% {  
      background-color: #00BCD4; /* 颜色变化 */  
      transform: rotate(270deg) scale(1.1); /* 旋转270度并放大 */  
    }  
    100% {  
      background-color: #4CAF50; /* 回到初始颜色 */  
      transform: rotate(360deg) scale(1); /* 旋转360度并回到初始大小 */  
    }  
  }  
</style> 
</head>  
<body>  
  
<div class="animated-box"></div>  
  
</body>  
</html>
相关推荐
hwjfqr2 分钟前
VSCode终端中文乱码问题解决
前端·后端
11 分钟前
前端页面空白监控:从检测到溯源的全链路实战方案
前端
妮妮喔妮13 分钟前
如何把HTML转化成桌面Electron
前端·javascript·electron
日月晨曦15 分钟前
React 在线 playground 实现指南:让代码在浏览器里「原地爆炸」的黑科技
前端·react.js
南北是北北15 分钟前
Flow 里的上游/下游
前端·面试
金州_拉文15 分钟前
uniapp
前端·uni-app
鹏程十八少16 分钟前
10. Android <卡顿十>高度封装Matrix卡顿, 修改Matrix源码和发布自己的插件
前端
写代码的stone17 分钟前
antd时间选择器组件体验优化之useLayoutEffect 深度解析:确保 DOM 更新时序的关键机制
前端
Lazy_zheng17 分钟前
8 个高频 JS 手写题全面解析:含 Promise A+ 测试实践
前端·javascript·面试
子轩学长说17 分钟前
Nano banana极致能力测试,不愧为P图之神~
前端