設頁面中有<div ></div>，若定義. pacman的樣式規則為：
.pacman
{
position: absolute;
width:0px;
height:0px;
top:100px;
left:30px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
可在頁面中顯示如圖1所示的食豆人，
圖1 食豆人
再在頁面相同的位置放置一個食豆人，定義影片關鍵幀，使一個食豆人逆時針旋轉90°，一個食豆人順時針旋轉90°，這樣可得到食豆人的口張開和閉合的影片效果，
撰寫的HTML檔案如下，
<!DOCTYPE html>
<html>
<title>食豆人</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.pacman
{
position: absolute;
width:0px;
height:0px;
top:100px;
left:30px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
.pacman:nth-child(1)
{
animation:rotate_up 0.5s infinite;
}
.pacman:nth-child(2)
{
animation:rotate_down 0.5s infinite;
}
@keyframes rotate_up
{
0% { transform:rotate(-90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(-90deg);}
}
@keyframes rotate_down
{
0% { transform:rotate(90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(90deg);}
}
</style>
</head>
<body>
<div >
<div ></div>
<div ></div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖2所示的影片效果，
圖2 食豆人的口張開閉合
再在頁面添加3顆豆子，豆子在食豆人口張開的前方水平移動，移到食豆人的口中，呈現食豆人吃豆子的影片效果，
撰寫的HTML檔案如下，
<!DOCTYPE html>
<html>
<title>食豆人</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.pacman
{
position: absolute;
width:0px;
height:0px;
top:100px;
left:30px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
.pacman:nth-child(1)
{
animation:rotate_up 0.5s infinite;
}
.pacman:nth-child(2)
{
animation:rotate_down 0.5s infinite;
}
.bean
{
background-color:#e73068;
width:15px;
height:15px;
border-radius:50%;
position:absolute;
top:145px;
left:250px;
animation:move 1s var(--delay) infinite linear;
}
@keyframes move
{
75% { opacity:0.7;}
100% { transform:translate(-200px,0px);}
}
@keyframes rotate_up
{
0% { transform:rotate(-90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(-90deg);}
}
@keyframes rotate_down
{
0% { transform:rotate(90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(90deg);}
}
</style>
</head>
<body>
<div >
<div ></div>
<div ></div>
<div style="--delay:0s;"></div>
<div style="--delay:0.333s;"></div>
<div style="--delay:0.666s;"></div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖3所示的影片效果，
圖3 吃豆的食豆人
圖3的食豆人比較懶，除了口張開閉合外，不移動，主動去吃豆，好在前方有豆子源源不斷地往口中送，守株待兔到這份上，也算有大運了，
讓食豆人移動起來，撰寫如下的HTML檔案，
<!DOCTYPE html>
<html>
<title>食豆人</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.move-box
{
width:100px;
height:100px;
position: absolute;
animation:move 4s infinite linear;
}
.pacman
{
position: absolute;
width:0px;
height:0px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
.pacman:nth-child(1)
{
animation:rotate_up 0.5s infinite;
}
.pacman:nth-child(2)
{
animation:rotate_down 0.5s infinite;
}
@keyframes move
{
0%,100% { transform:translate(0,0) rotate(0deg); }
24% { transform:translate(300px,0) rotate(0deg); }
25% { transform:translate(300px,0) rotate(90deg); }
49% { transform:translate(300px,200px) rotate(90deg); }
50% { transform:translate(300px,200px) rotate(180deg); }
74% { transform:translate(0,200px) rotate(180deg); }
75% { transform:translate(0,200px) rotate(270deg); }
99% { transform:translate(0,0) rotate(270deg); }
}
@keyframes rotate_up
{
0% { transform:rotate(-90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(-90deg);}
}
@keyframes rotate_down
{
0% { transform:rotate(90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(90deg);}
}
</style>
</head>
<body>
<div >
<div >
<div ></div>
<div ></div>
</div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖4所示的影片效果，
圖4 移動的食豆人
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/895.html
標籤：Html/Css
上一篇：CSS影片實體：圓與圓的碰撞