CSS影片實體：正方形影片特效-有解無憂

設頁面中有<div ></div>，若定義. square的樣式規則如下：

.square

{

margin: 20px auto;

position: relative;

width: 260px;

height: 260px;

border:5px solid #f0f;

}

可在頁面中繪制出如圖1所示的正方形，

圖1 正方形

下面將1個或多個如圖1所示的正方形作為基本影片元素，為它們定義關鍵幀，使這些正方形產生影片效果，

1．正方形旋轉縮放

在頁面中放置一個正方形，定義關鍵幀，使得這個正方形在旋轉的同時進行縮放，

撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>正方形旋轉縮放</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 300px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

margin: 25px auto;

position: relative;

width: 250px;

height: 250px;

border:5px solid #f0f;

animation:change 5s ease infinite;

}

@keyframes change

{

0% { transform: rotate(0deg) scale(1); }

50% { transform: rotate(180deg) scale(0); }

100%{ transform: rotate(360deg) scale(1); }

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖2所示的影片效果，

圖2 正方形旋轉縮放

2．正方形拉伸

在頁面中放置一個正方形，定義關鍵幀，使得這個正方形先高度縮小為20%，然后寬度縮小為20%，之后高度放大回到100%，最后寬度放大回到100%，正方形還原，

撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>正方形拉伸</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 300px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

margin: 25px auto;

position: relative;

width: 250px;

height: 250px;

border:5px solid #f0f;

animation:change 5s ease infinite;

}

@keyframes change

{

0% { transform: scale(1, 1); }

25% { transform: scale(1, .2); }

50% { transform: scale(.2, .2); }

75% { transform: scale(.2, 1); }

100% { transform: scale(1, 1); }

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖3所示的影片效果，

圖3 正方形的拉伸

若修改關鍵幀change的定義如下：

@keyframes change

{

0% { transform: rotate3d(1, 0, 0, 0deg); }

100% { transform: rotate3d(1, 0, 0, 360deg); }

}

則在頁面中呈現出如圖4所示的影片效果，

圖4 正方形豎直方向上拉伸

在頁面中放置兩個正方形，一個正方形在豎直方向上拉伸，另一個正方形在水平方向上拉伸，撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>正方形拉伸</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 300px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

top: 25px;

left:25px;

position: absolute;

width: 250px;

height: 250px;

border:5px solid #f0f;

}

.square:nth-child(1)

{

animation:change1 5s ease infinite;

}

.square:nth-child(2)

{

animation:change2 5s ease infinite;

}

@keyframes change1

{

0% { transform: rotate3d(1, 0, 0, 0deg); }

100% { transform: rotate3d(1, 0, 0, 360deg); }

}

@keyframes change2

{

0% { transform: rotate3d(0, 1, 0, 0deg); }

100% { transform: rotate3d(0, 1, 0, 360deg); }

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖5所示的影片效果，

圖5 兩個正方形的拉伸

3．正方形放大與縮小

在頁面中放置一個正方形，定義關鍵幀，使得正方形邊框的寬度發生變化，從而得到正方形放大縮小的效果，

撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>正方形放大縮小</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 300px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

margin: 20px auto;

position: relative;

width: 260px;

height: 260px;

display:block;

border:0 solid #f0f;

box-sizing:border-box;

animation:change 1s linear alternate infinite;

}

@keyframes change

{

from { border-width:0; }

to { border-width:120px;}

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖6所示的影片效果，

圖6 正方形放大與縮小（1）

若將上面檔案中的陳述句“border:0 solid #f0f;” 修改為“border:0 dashed #f0f;”，其余部分保持不變，則在頁面中呈現出如圖7所示的影片效果，

圖7 正方形放大與縮小（2）

4．正方形分開和合攏

在頁面中重疊放置4個大小相同的正方形，每個正方形按指定的旋轉點旋轉90°，這樣4個正方形分開了，之后4個正方形又各自旋轉回原來位置，從而4個正方形合攏起來，

撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>正方形分開和合攏</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 300px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

top: 110px;

left:110px;

position: absolute;

width: 80px;

height: 80px;

border:5px solid #f0f;

animation:cornerrot 5s ease infinite;

}

.square:nth-child(1)

{

transform-origin: top left;

}

.square:nth-child(2)

{

transform-origin: top right;

}

.square:nth-child(3)

{

transform-origin: bottom left;

}

.square:nth-child(4)

{

transform-origin: bottom right;

}

@keyframes cornerrot

{

0% { transform: rotate(0deg); }

50% { transform: rotate(90deg); }

100% { transform: rotate(0deg); }

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖8所示的影片效果，

圖8 正方形分開和合攏

5．分布在九宮格外圍的正方形的縮放

在頁面中放置8個正方形，這8個正方形分布在九宮格的外圍，每個五角星按給定延遲進行縮放，

撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>正方形的縮放</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 300px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

top: var(--top);

left:var(--left);

position: absolute;

width: 10px;

height: 10px;

border:10px solid #f0f;

animation:change 1s var(--delay) ease infinite;

}

@keyframes change

{

0% { transform: scale(1); }

50% { transform: scale(0); }

100% { transform: scale(1); }

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖9所示的影片效果，

圖9 分布在九宮格外圍的正方形的縮放

6．旋轉的正方形

在頁面中重疊放置2個大小相同的正方形，為這2個正方形各自定義關鍵幀，使得每個正方形進行旋轉，

撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>正方形的旋轉</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 300px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

top: 75px;

left:75px;

position: absolute;

width: 150px;

height: 150px;

border:4px solid #f0f;

animation: 5s ease infinite;

}

@keyframes rotate1

{

0% { transform: rotate(0deg); }

50% { transform: rotate(360deg); }

100% { transform: rotate(360deg); }

}

@keyframes rotate2

{

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖10所示的影片效果，

圖10 兩個旋轉的正方形（1）

若修改關鍵幀的定義如下：

@keyframes rotate1

{

0% { transform: rotate(0deg); }

100% { transform: rotate(90deg); }

}

@keyframes rotate2

{

0% { transform: rotate(90deg); }

100% { transform: rotate(0deg); }

}

則在頁面中呈現出如圖11所示的影片效果，

圖11 兩個旋轉的正方形（2）

在頁面中放置邊長不同的12個正方形，這12個正方形的中心位于一點，為正方形定義關鍵幀，使得每個正方形在旋轉的同時邊框寬度發生變化，

撰寫的HTML檔案如下，

<!DOCTYPE html>

<html>

<title>旋轉的正方形</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 500px;

height:500px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.square

{

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

width:var(--length);

height:var(--length);

border: 2px solid #ff00ff;

animation: rotate 1.5s linear infinite, change 1.5s linear infinite;

animation-delay:var(--delay);

}

@keyframes change

{

20% { border-width: 16px; }

80% { border-width: 2px; }

}

@keyframes rotate

{

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖12所示的影片效果，

圖12 旋轉的正方形

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106550.html

標籤：其他

上一篇：JavaScript陣列

下一篇：零基礎web前端學習教程入門 + 進階 + 精通！