HTML5 是一種實現多媒體和圖形的最新 Web 技術標準。它為開發人員提供了使用多種動畫效果的機會。其中之一是滑動動畫效果。
以下是一個使用 HTML5 實現滑動動畫效果的代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>滑動動畫效果</title>
<style>
.slide {
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
}
.slide ul {
position: absolute;
left: 0;
margin: 0;
padding: 0;
list-style: none;
width: 1200px;
height: 400px;
animation: slides 8s infinite;
}
.slide li {
width: 400px;
height: 400px;
float: left;
background: #ccc;
margin-right: 5px;
}
@keyframes slides {
0% {
left: 0;
}
18% {
left: 0;
}
20% {
left: -400px;
}
38% {
left: -400px;
}
40% {
left: -800px;
}
58% {
left: -800px;
}
60% {
left: -1200px;
}
78% {
left: -1200px;
}
80% {
left: 0;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<div class="slide">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>
</body>
</html>該代碼創建了一個滑動動畫效果，其中包含一組圖片。在這個例子中，我們將圖片作為不同的 li 元素嵌套在一個 ul 元素中。我們將所有 li 元素的寬度和高度都設置為 400 像素，并將它們浮動在左側。我們還將 ul 元素的位置設置為相對，因為我們要將其作為 li 元素的參照點，而不是浮動元素的參照點。
我們使用 @keyframes 規則來定義滑動動畫的具體實現。該規則包括了圖像滑動所需的關鍵幀，每個關鍵幀都包括一個百分比值和相應的 left 值。最后，我們將 slide 類應用到包含滑動動畫的 div 元素上，以便我們可以應用所需的 CSS 樣式。
通過以上代碼，我們可以在 HTML5 中很容易地實現滑動動畫效果。我們只需簡單地使用 keyframes 規則定義動畫，并將其應用到 HTML 元素上即可。
上一篇dockerdtr