資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究翻頁視窗效果
"翻頁視窗"效果，也稱為"視窗旋轉"效果，是一種視覺現象，當透過多個旋轉的視窗或面板觀察物體或場景時發生。為了給觀眾帶來沉浸式和引人入勝的體驗，翻頁視窗效果經常用於互動式顯示、數字動畫和藝術裝置。
讓我們深入瞭解這篇文章，學習如何繪製翻頁視窗效果。這可以透過使用CSS @keyframes來實現。在我們深入瞭解文章之前，讓我們快速瀏覽一下。
CSS @keyframes
Keyframes用於CSS動畫。它為您提供了更多關於您希望實現的動畫的靈活性。透過逐漸從一種樣式切換到另一種樣式，產生動畫效果。您可以根據需要多次修改CSS樣式。
語法
以下是CSS @keyframes的語法
@keyframes animationname {keyframes-selector {css-styles;}}
示例
考慮下面的示例，我們將在此示例中在網頁上建立翻頁視窗效果。
HTML
以下是我們將建立兩個span標籤並將其包裝在div標籤中的HTML程式碼。
<!DOCTYPE html>
<html>
<body>
<div class="tutorial">
<span>A</span>
<span>B</span>
</div>
</body>
</html>
CSS
現在我們將使用@keyframes，向其新增動畫，並向其新增CSS部分。
<style>
.tutorial {
position: absolute;
top: 40%;
left: 40%;
}
span {
position: absolute;
width: 50px;
height: 50px;
background: #DE3163;
animation: animate 2s infinite;
}
span:nth-child(1) {
background-color: #8E44AD;
left: -64px;
top: -54px;
animation-delay: 0.1s;
}
@keyframes animate {
10% {
transform: rotateX(360deg);
}
60% {
transform: rotateY(360deg);
}
}
body {
background-color: #D5F5E3;
height:300px;
}
</style>
完整程式碼
現在我們將結合這兩個程式碼，並在網頁上觀察輸出。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
position: absolute;
top: 40%;
left: 40%;
}
span {
position: absolute;
width: 50px;
height: 50px;
background: #DE3163;
animation: animate 2s infinite;
}
span:nth-child(1) {
background-color: #8E44AD;
left: -64px;
top: -54px;
animation-delay: 0.1s;
}
@keyframes animate {
10% {
transform: rotateX(360deg);
}
60% {
transform: rotateY(360deg);
}
}
body {
background-color: #D5F5E3;
height:300px;
}
</style>
</head>
<body>
<div class="tutorial">
<span>A</span>
<span>B</span>
</div>
</body>
</html>
當我們執行上述程式碼時，它將生成一個包含應用了CSS的兩個視窗的輸出，顯示網頁上翻轉的視窗。
更新於：2024年1月19日
瀏覽量：54
廣告