CSS動畫實例：正方形動畫特效

時間 2020-09-22

標籤 css 動畫實例正方形特效欄目 CSS 简体版

原文原文鏈接

設頁面中有<div class="square"></div>，若定義. square的樣式規則以下：html

.square瀏覽器

{動畫

margin: 20px auto;spa

position: relative;3d

width: 260px;orm

height: 260px;htm

border:5px solid #f0f;blog

}animation

可在頁面中繪製出如圖1所示的正方形。it

圖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>

</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>

</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>

</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>

</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>

</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>

</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>

</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>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖12所示的動畫效果。

圖12 旋轉的正方形

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。