本教程詳細(xì)闡述如何利用css `keyframes` 實(shí)現(xiàn)一個(gè)兩階段的圖形動(dòng)畫(huà)：首先從頁(yè)面左側(cè)中點(diǎn)水平滑動(dòng)至屏幕中心，隨后從屏幕中心對(duì)角線(xiàn)滑動(dòng)至左上角。通過(guò)精確設(shè)置關(guān)鍵幀的百分比和對(duì)應(yīng)的`top`、`left`屬性，結(jié)合`animation-fill-mode: forwards`，可創(chuàng)建流暢且停留在最終狀態(tài)的復(fù)雜動(dòng)畫(huà)效果。
在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，動(dòng)畫(huà)是提升用戶(hù)體驗(yàn)和頁(yè)面活力的重要手段。CSS動(dòng)畫(huà)提供了一種聲明式的方式來(lái)創(chuàng)建各種動(dòng)態(tài)效果，而@keyframes規(guī)則則是實(shí)現(xiàn)復(fù)雜、多階段動(dòng)畫(huà)的核心。本文將深入探討如何利用@keyframes實(shí)現(xiàn)一個(gè)圖形元素先水平移動(dòng)再對(duì)角線(xiàn)移動(dòng)的復(fù)合動(dòng)畫(huà)效果。
CSS動(dòng)畫(huà)通過(guò)定義一系列關(guān)鍵幀（keyframes）來(lái)描述元素在不同時(shí)間點(diǎn)的樣式。每個(gè)關(guān)鍵幀都由一個(gè)百分比值（0%到100%）表示動(dòng)畫(huà)進(jìn)程中的特定時(shí)刻，并定義了該時(shí)刻元素應(yīng)具有的CSS屬性。瀏覽器會(huì)在這些關(guān)鍵幀之間平滑地過(guò)渡元素的樣式。
對(duì)于需要按順序執(zhí)行多個(gè)不同方向或類(lèi)型的動(dòng)畫(huà)，我們只需在同一個(gè)@keyframes規(guī)則中定義多個(gè)中間關(guān)鍵幀。例如，要實(shí)現(xiàn)“先水平后對(duì)角線(xiàn)”的動(dòng)畫(huà)，我們可以將動(dòng)畫(huà)總時(shí)長(zhǎng)劃分為幾個(gè)階段，并在每個(gè)階段的結(jié)束點(diǎn)設(shè)置一個(gè)關(guān)鍵幀。
我們將通過(guò)一個(gè)具體的例子來(lái)演示如何實(shí)現(xiàn)上述動(dòng)畫(huà)：一個(gè)圖形（例如一個(gè)div元素）首先從頁(yè)面左側(cè)中點(diǎn)水平滑動(dòng)到屏幕中心，然后從屏幕中心對(duì)角線(xiàn)滑動(dòng)到屏幕左上角。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
首先，我們需要一個(gè)承載動(dòng)畫(huà)的HTML元素。這里我們使用一個(gè)簡(jiǎn)單的div：
<div id="img1">IMAGE</div>
為了讓div元素能夠精確地定位和動(dòng)畫(huà)，我們需要為其設(shè)置position: absolute，并定義動(dòng)畫(huà)的基本屬性，如動(dòng)畫(huà)名稱(chēng)、持續(xù)時(shí)間、緩動(dòng)函數(shù)以及動(dòng)畫(huà)填充模式。
#img1 {
/* 初始定位：垂直居中 */
top: 50%;
/* 將元素顯示為塊級(jí)元素 */
display: block;
/* 啟用絕對(duì)定位，以便使用top和left進(jìn)行精確移動(dòng) */
position: absolute;
/* 定義動(dòng)畫(huà)：名稱(chēng) 持續(xù)時(shí)間 緩動(dòng)函數(shù) 填充模式 */
animation: image1 10s linear forwards;
/* 可選：設(shè)置元素尺寸和背景色以便觀察 */
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
}關(guān)鍵屬性解釋?zhuān)?/strong>
這是實(shí)現(xiàn)多階段動(dòng)畫(huà)的核心。我們需要定義三個(gè)關(guān)鍵幀來(lái)描述動(dòng)畫(huà)的三個(gè)重要狀態(tài)：
@-webkit-keyframes image1 { /* 考慮兼容性，添加 -webkit- 前綴 */
0% {
left: 0; /* 從左邊緣開(kāi)始 */
top: 50%; /* 垂直居中 */
/* transform: translateX(0); 如果需要更精細(xì)的控制，可以配合transform */
}
50% {
left: 50%; /* 水平移動(dòng)到屏幕中心 */
top: 50%; /* 保持垂直居中 */
}
100% {
left: 0; /* 對(duì)角線(xiàn)移動(dòng)到左邊緣 */
top: 0; /* 對(duì)角線(xiàn)移動(dòng)到頂部邊緣 */
}
}
@keyframes image1 { /* 標(biāo)準(zhǔn)語(yǔ)法 */
0% {
left: 0;
top: 50%;
}
50% {
left: 50%;
top: 50%;
}
100% {
left: 0;
top: 0;
}
}關(guān)鍵幀解釋?zhuān)?/strong>
將上述HTML和CSS代碼整合，即可實(shí)現(xiàn)所需的多階段動(dòng)畫(huà)效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS多階段動(dòng)畫(huà)：水平后對(duì)角線(xiàn)滑動(dòng)</title>
<style>
body {
margin: 0;
overflow: hidden; /* 防止?jié)L動(dòng)條出現(xiàn) */
height: 100vh; /* 確保body占滿(mǎn)整個(gè)視口高度 */
position: relative; /* 為#img1提供定位上下文 */
}
#img1 {
top: 50%;
display: block;
position: absolute;
animation: image1 10s linear forwards;
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
transform: translateY(-50%); /* 修正top:50%導(dǎo)致元素中心不在中線(xiàn)的問(wèn)題 */
}
/* 兼容性前綴 */
@-webkit-keyframes image1 {
0% {
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
}
50% {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%); /* 確保元素中心在屏幕中心 */
}
100% {
left: 0;
top: 0;
-webkit-transform: translateY(0); /* 確保元素左上角在屏幕左上角 */
}
}
/* 標(biāo)準(zhǔn)語(yǔ)法 */
@keyframes image1 {
0% {
left: 0;
top: 50%;
transform: translateY(-50%);
}
50% {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
100% {
left: 0;
top: 0;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div id="img1">IMAGE</div>
</body>
</html>注意： 在上述示例中，為了更精確地控制元素的中心點(diǎn)，我引入了transform: translateY(-50%)和transform: translate(-50%, -50%)。
通過(guò)靈活運(yùn)用CSS的@keyframes規(guī)則，我們可以輕松實(shí)現(xiàn)各種復(fù)雜的多階段動(dòng)畫(huà)。關(guān)鍵在于將動(dòng)畫(huà)分解為多個(gè)邏輯階段，并在每個(gè)階段的起始和結(jié)束點(diǎn)定義清晰的CSS樣式。結(jié)合animation屬性的各種參數(shù)，如持續(xù)時(shí)間、緩動(dòng)函數(shù)和填充模式，我們可以創(chuàng)建出豐富且富有表現(xiàn)力的網(wǎng)頁(yè)動(dòng)態(tài)效果。
以上就是CSS實(shí)現(xiàn)圖形先水平后對(duì)角線(xiàn)滑動(dòng)的多階段動(dòng)畫(huà)教程的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
每個(gè)人都需要一臺(tái)速度更快、更穩(wěn)定的 PC。隨著時(shí)間的推移，垃圾文件、舊注冊(cè)表數(shù)據(jù)和不必要的后臺(tái)進(jìn)程會(huì)占用資源并降低性能。幸運(yùn)的是，許多工具可以讓 Windows 保持平穩(wěn)運(yùn)行。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
207
收藏
