設頁面中有<div class=”shape”></div>，若定義.shape的樣式規則為：
.shape
{
position: absolute;
left:125px;
top:75px;
width: 150px;
height: 150px;
border-radius:10% 50% 10% 50%;
border:2px solid #f00;
background-color: #ff0;
}
可在頁面中顯示如圖1所示的圖形，
圖1 影片基本圖形
以這個圖形作為參與影片的物件，為其定義關鍵幀anim，并設定animation屬性，使之產生影片效果，
例如，定義如下的關鍵幀anim
@keyframes anim
{
0%,15% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
可在頁面中呈現如圖2所示的影片，圖形旋轉起來了，
圖2 圖形旋轉效果
撰寫的HTML檔案內容如下，
<!DOCTYPE html>
<html>
<title>圖形的影片效果</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
overflow:hidden;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: absolute;
left:125px;
top:75px;
width: 150px;
height: 150px;
border-radius:10% 50% 10% 50%;
border:2px solid #f00;
background-color: #ff0;
animation:anim 5s linear infinite;
}
@keyframes anim
{
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div >
<div ></div>
</div>
</body>
</html>
1．閃爍
閃爍影片效果的設定主要利用opacity屬性為參與影片的物件設定一個透明度級別，其基本格式為：opacity: value;
其中，屬性值value指定不透明度，從0.0（完全透明）到1.0（完全不透明），
若修改關鍵幀anim如下：
@keyframes anim
{
0%,50%,100% {opacity:1;}
25%,75% {opacity:0;}
}
則在頁面中呈現如圖3所示的閃爍影片效果，
圖3 閃爍
2．淡入淡出
利用opacity屬性還可以實作淡入淡出的影片效果，
若修改關鍵幀anim如下：
@keyframes anim
{
0% { opacity:1; transform:translateY(0); }
100% { opacity:0; transform:translateY(-225px); }
}
則在頁面中呈現如圖4所示的向上淡出影片效果，
圖4 向上淡出
若修改關鍵幀anim如下：
@keyframes anim
{
0% { opacity:0; transform:translateX(-275px); }
100% { opacity:1; transform:translateX(0); }
}
則在頁面中呈現如圖5所示的從左淡入影片效果，
圖5 從左淡入
仿照上面的例子，大家可以試試向下淡出、向左淡出、向右淡出、從上淡入、從下淡入、從右淡入等影片效果的設定，甚至可以設定從四個角向中心的淡入、從中心向四個角淡出的影片效果，
3．飛入
利用變換屬性transform:translate();讓物件的位置進行變化，可以實作飛入影片效果，
若修改關鍵幀anim如下：
@keyframes anim
{
0% { transform:translate(-275px,-225px); }
100% { transform:translate(0,0); }
}
則在頁面中呈現如圖6所示的從左上角飛入影片效果，
圖6 從左上角飛入
4．縮放
縮放主要是利用變換屬性transform:scale(n)進行設定，
若修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:scale(1);}
50% { transform:scale(1.8);}
}
則在頁面中呈現如圖7所示的放大與縮小影片效果，
圖7 放大與縮小
5．翻轉
利用屬性transform: rotateX(n);或transform: rotateY(n);可以實作翻轉影片效果，
若修改關鍵幀anim如下：
@keyframes anim
{
0% {transform:perspective(400px) rotateY(0);}
100% {transform:perspective(400px) rotateY(360deg);}
}
則在頁面中呈現如圖8所示的水平（左右）翻轉影片效果，
圖8 水平翻轉
若修改關鍵幀anim如下：
@keyframes anim
{
0% {transform:perspective(400px) rotateX(0);}
100% {transform:perspective(400px) rotateX(360deg);}
}
則在頁面中呈現如圖9所示的垂直（上下）翻轉影片效果，
圖9 垂直翻轉
若修改關鍵幀anim如下：
@keyframes anim
{
0% { transform:perspective(400px) rotateY(0);}
40% { transform:perspective(400px) rotateY(170deg) scale(1.5);}
50% { transform:perspective(400px) rotateY(190deg) scale(1.5);}
80% { transform:perspective(400px) rotateY(360deg) scale(1);}
100% {transform:perspective(400px) scale(1);}
}
則在頁面中呈現如圖10所示的縮放翻轉影片效果，
圖10 縮放式翻轉
6．搖擺
讓物件在一個較小范圍內進行旋轉，可以實作搖擺的影片效果，
若修改關鍵幀anim如下：
@keyframes anim
{
20% { transform:rotate(15deg); }
40% { transform:rotate(-15deg); }
60% { transform:rotate(8deg);}
80% { transform:rotate(-8deg); }
100% { transform:rotate(0); }
}
則在頁面中呈現如圖11所示的搖擺影片效果，
圖11 搖擺
若在搖擺程序同時讓物件左右適當平移，修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:translateX(0);}
15% { transform:translateX(-100px) rotate(-5deg);}
30% { transform:translateX(80px) rotate(5deg);}
45% { transform:translateX(-65px) rotate(-3deg);}
60% { transform:translateX(40px) rotate(3deg);}
75% { transform:translateX(-20px) rotate(-1deg);}
}
則在頁面中呈現如圖12所示的左右搖擺影片效果，
圖12 左右搖擺
若在搖擺程序同時讓物件進行適當縮放，修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:scale(1) rotate(0);}
10%,20% { transform:scale(0.9) rotate(-8deg);}
30%,50%,70%,90% { transform:scale(1.1) rotate(8deg);}
40%,60%,80% { transform:scale(1.1) rotate(-8deg);}
}
則在頁面中呈現如圖13所示的晃動影片效果，它也像在振鈴，
圖13 晃動
7．往復運動
若修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:translateX(0); }
10%,30%,50%,70%,90% { transform:translateX(-15px); }
20%,40%,60%,80% { transform:translateX(15px); }
}
則在頁面中呈現如圖14所示的左右往復運動影片效果，
圖14 左右往復運動
若修改關鍵幀anim如下：
@keyframes anim
{
0%,20%,50%,80%,100% { transform:translateY(0);}
40% { transform:translateY(-50px); }
60% { transform:translateY(50px); }
}
則在頁面中呈現如圖15所示的上下彈跳影片效果，
圖15 上下彈跳
若修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:translate(-20px,-20px); }
25% { transform:translate(-20px,20px); }
50% { transform:translate(20px,20px); }
80% { transform:translate(20px,-20px); }
}
則在頁面中呈現如圖16所示的四周回圈往復影片效果，
圖16 四周回圈往復運動
8．旋入
若修改關鍵幀anim如下：
@keyframes anim
{
0% { transform-origin:left bottom;transform:rotate(-180deg); opacity:0; }
100% { transform-origin:left bottom;transform:rotate(0); opacity:1;}
}
則在頁面中呈現如圖17所示的從左下角旋入影片效果，
圖17 從左下角旋入
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/893.html
標籤：Html/Css
上一篇：CSS影片實體：旋轉的同心圓
下一篇：CSS影片實體：圓與圓的碰撞