要做到翻動，這是我編了一個模擬書籍翻頁的效果。運用到CSS3 @keyframes 關鍵字，在建立動畫時，把它連到一個選擇器，並用百分比產生時間軸，然後就會看到動畫效果翻頁效果。如下是部分原始碼，請關注我，並與你分享，謝謝！<!DOCTYPE html>
<html>
<head>
<style>
body
{
perspective: 1000px;
background-color: #212121;
}
.box
position: absolute;
top: 50%;
left: 50%;
……
.box1 {
top: 0;
left: 0;
width: 200px;
height: 300px;
border: 1px solid #1976D2;
transform-origin: 0 50%;
background:Beige;
animation: mybox 5s;
@keyframes mybox
0% {transform: rotateY(0deg);}
50% {transform: rotateY(-150deg);}
100%{transform: rotateY(0deg);}
</style>
</head>
<body>
<div >
<p> 第<br>二<br>頁</p>
<p>
首<br>頁
</p>
</div>
下面在手機AIDE Web應用中執行結果
要做到翻動，這是我編了一個模擬書籍翻頁的效果。運用到CSS3 @keyframes 關鍵字，在建立動畫時，把它連到一個選擇器，並用百分比產生時間軸，然後就會看到動畫效果翻頁效果。如下是部分原始碼，請關注我，並與你分享，謝謝！<!DOCTYPE html>
<html>
<head>
<style>
body
{
perspective: 1000px;
background-color: #212121;
}
.box
{
position: absolute;
top: 50%;
left: 50%;
……
}
.box1 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 300px;
border: 1px solid #1976D2;
transform-origin: 0 50%;
background:Beige;
animation: mybox 5s;
}
……
@keyframes mybox
{
0% {transform: rotateY(0deg);}
50% {transform: rotateY(-150deg);}
100%{transform: rotateY(0deg);}
}
</style>
</head>
<body>
<div >
<p> 第<br>二<br>頁</p>
……
<p>
首<br>頁
</p>
</div>
</div>
……
下面在手機AIDE Web應用中執行結果