CSS：CSS3 - 背景 & 過渡動畫

阿新 • • 發佈：2021-08-10

1 背景

背景位置

background-origin：指定了背景影象的位置區域

　　border-box : 背景貼邊框的邊

　　padding-box : 背景貼內邊框的邊

　　content-box : 背景貼內容的邊

<style>
div {
background: url("img/1.jpg") no-repeat;
width: 200px;
height: 80px;
margin: 20px;
border: 10px dashed black;
padding: 20px;
}
.a {
background-origin: border-box;
}
.b {
background-origin 
: padding-box;
}
.c {
background-origin: content-box;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>

背景裁切

background-clip:

　　border-box 邊框開切

　　padding-box 內邊距開切

　　content-box 內容開切

<style>
div {
width 
: 200px;
height: 80px;
border: 10px dashed red;
background-color: darkcyan;
margin: 20px;
padding: 20px;
}
.a {
background-clip: border-box;
}
.b {
background-clip: padding-box;
}
.c {
background-clip: content-box;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>

背景大小

background-size:

　　cover 縮放成完全覆蓋背景區域最小大小

　　contain 縮放成完全適應背景區域最大大小

<style>
div {
background: url("img/1.jpg") no-repeat;
width: 200px;
height: 100px;
border: 2px solid red;
margin: 20px;
}
.a {
background-size: cover; /* 完全覆蓋 */
}
.b {
background-size: contain; /* 完全適應 */
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>

2過渡動畫

過渡

從一個狀態到另一個狀態，中間的“緩慢”過程；

缺點是，控制不了中間某個時間點。

transition｛1 2 3 4｝

　　1：過渡或動畫模擬的css屬性

　　2：完成過渡所使用的時間（2s內完成）

　　3：過渡函式。。。

　　4：過渡開始出現的延遲時間

transition: width 2s ease 1s;

目前，css3只開發出部分的過渡屬性，下圖所示：

<style>
div{
width: 100px;
height: 50px;
border: 2px solid red;
}
.a{
transition: width 2s linear 1s; /*1秒過後，div在2秒內勻速緩慢的變寬*/
}
div:hover{ width: 300px;} /*觸發div變寬*/
</style>
<body>
<div class="a">Hello,拉勾</div>
</body>

動畫

從一個狀態到另一個狀態，過程中每個時間點都可以控制。

　　關鍵幀：@keyframes 動畫幀 { from{} to{} } 或者{ 0%{} 20%{}... }

　　動畫屬性：animation{ 1 , 2 , 3 , 4 , 5 }

　　　　1：動畫幀

　　　　2：執行時間

　　　　3：過渡函式

　　　　4：動畫執行的延遲（可省略）

　　　　5：動畫執行的次數

需求1：一個元素從左向右移動，3秒內執行2次

<style>
div{
width: 700px;
border: 1px solid red;
}
@keyframes x{
from{ margin-left: 0px;}
to{ margin-left: 550px;}
}
img{
animation: x 3s linear 2;
}
</style>
<body>
<div>
<img src="img/cat.gif">
</div>
</body>

需求2：一個元素從左向右移動，3秒內執行完成。無限次交替執行

infinite：無限次

alternate：來回執行（交替，一去一回）

<style>
.wai{
width: 600px;
height: 100px;
border: 2px solid red;
}
.nei{
width: 40px;
height: 80px;
margin: 5px;
background: red;
}
.nei{
animation: x 3s linear infinite alternate;
}
@keyframes x{
0%{ margin-left: 0px; }
25%{ background: yellowgreen; }
50%{ background: goldenrod; }
75%{ background: palevioletred;}
100%{
background: coral;
margin-left: 550px;
}
}
</style>
<body>
<div class="wai">
<div class="nei"></div>
</div>
</body>