HTML如何做翻動(dòng)？
網(wǎng)友解答: 要做到翻動(dòng)，這是我編了一個(gè)模擬書籍翻頁(yè)的效果。運(yùn)用到CSS3 @keyframes 關(guān)鍵字，在創(chuàng)建動(dòng)畫時(shí)，把它連到一個(gè)選擇器，并用百分比產(chǎn)生時(shí)間軸，然后就會(huì)看到動(dòng)畫效果翻頁(yè)效
要做到翻動(dòng)，這是我編了一個(gè)模擬書籍翻頁(yè)的效果。運(yùn)用到CSS3 @keyframes 關(guān)鍵字，在創(chuàng)建動(dòng)畫時(shí)，把它連到一個(gè)選擇器，并用百分比產(chǎn)生時(shí)間軸，然后就會(huì)看到動(dòng)畫效果翻頁(yè)效果。如下是部分源碼，請(qǐng)關(guān)注我，并與你分享，謝謝！<!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 class="box"
<p 第<br二<br頁(yè)</p
……
<p
首<br頁(yè)
</p
</div
</div
……
下面在手機(jī)AIDE Web應(yīng)用中運(yùn)行結(jié)果