四道竞赛真题带你通关CSS动画 ｜ 课型：实习课 ｜ 建议课时：4节
3秒内正方形缩小变形成红色圆圈再复原，cubic-bezier缓动。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Task 3 - 正方形变圆</title>
<style>
* { margin: 0; padding: 0; }
body { height: 100vh; display: flex; justify-content: center; align-items: center;
background: #29303b; }
#block { width: 400px; height: 400px; border: 2px solid white; background-color: yellow;
animation: animate 3s cubic-bezier(.25, .5, .25, 1) infinite; }
@keyframes animate {
0%, 100% { border: 2px solid white; transform: scale(1); border-radius: 0%; background-color: yellow; }
50% { transform: scale(.2); border: 8px solid red; border-radius: 50%; background-color: transparent; }
}
</style>
</head>
<body><div id="block"></div></body>
</html>SVG文字先描边后填充的经典开场动画。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Task 2 - Hello World描边</title>
<style>
* { margin: 0; padding: 0; }
body { height: 100vh; background: #000; display: flex; justify-content: center; align-items: center; }
div { width: 800px; height: 400px; background: #fff; }
svg { width: 100%; height: 100%; }
text { font-size: 100px; stroke: #000; stroke-dasharray: 1600; stroke-dashoffset: 1600;
fill: transparent;
animation: draw 2s ease-in-out forwards, fill 0.3s 1.7s forwards; }
@keyframes draw { to { stroke-dasharray: 2400; } }
@keyframes fill { to { fill: #000; } }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg"><text x="100" y="250">Hello World</text></svg>
</div>
</body>
</html>三个圆点依次跳动的loading效果——animation-delay队列。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Task 8 - Loading</title>
<style>
body { height: 100vh; display: flex; justify-content: center; align-items: center;
background: #123a52; margin: 0; }
.dot { width: 24px; height: 24px; margin: 0 8px; border-radius: 50%; background: #38d6c4;
animation: bounce 1.2s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }
@keyframes bounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-30px); }
}
</style>
</head>
<body>
<div class="dot"></div><div class="dot"></div><div class="dot"></div>
</body>
</html>任务目标：独立完成竞赛任务2/3/4/8四道动画真题
| 任务内容与评分 |
|---|
| 任务1：为个人站按钮卡片添加transition微交互（15分） |
| 任务2：完成任务3方形变圆并通过评分点自查（25分） |
| 任务3：完成任务2描边动画（25分） |
| 任务4：完成任务8加载动画（20分） |
| 任务5：任务4灰度图：hover时彩色、离开灰色（15分） |