言
在現代Web開發中,CSS3的@keyframes規則為網頁動態效果的創建提供了強大的原生支持。通過定義關鍵幀動畫,我們可以實現從一個樣式狀態平滑過渡到另一個樣式狀態的過程,讓網頁元素動起來,提升用戶體驗和視覺效果。本文將詳細介紹@keyframes的工作原理、使用方法以及示例應用。
@keyframes是CSS3中的一個重要特性,用于創建動畫。它允許開發者定義一組或多組樣式變化過程(關鍵幀),瀏覽器會自動計算中間幀,從而生成流暢的動畫效果。每個關鍵幀都代表了動畫過程中的某一特定時間點的樣式狀態。
@keyframes 動畫名稱 {
0% { /* 初始狀態樣式 */ }
50% { /* 中間狀態樣式 */ }
100% { /* 結束狀態樣式 */ }
}
/* 或者多個關鍵幀 */
@keyframes 動畫名稱 {
0% { ... }
25% { ... }
50% { ... }
75% { ... }
100% { ... }
}
創建完關鍵幀動畫后,要使其生效,需要將其應用于具體的HTML元素,并指定動畫的時長和其他參數:
選擇器 {
animation-name: 動畫名稱;
animation-duration: 動畫時長;
/* 其他可選屬性如:
* animation-timing-function, animation-delay, animation-iteration-count,
* animation-direction, animation-fill-mode, animation-play-state等
*/
}
例如:
/* 定義一個簡單的旋轉動畫 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.box {
width: 100px;
height: 100px;
background-color: red;
/* 應用動畫 */
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite; /* 無限次循環播放 */
}
在這個例子中,.box元素將按照spin動畫定義的內容,每2秒完成一次從0度到360度的旋轉,并且會無限循環。
除了基礎的樣式變換外,@keyframes還可以結合其他CSS屬性實現更復雜的動畫效果,如顏色漸變、尺寸變化、位置移動等。同時,可以通過調整關鍵幀的分布和動畫曲線來控制動畫的節奏和流暢度。
示例: 下面是一個更為豐富的動畫示例,展示了元素從左向右移動并改變透明度的過程:
@keyframes slideFade {
0% {
left: 0;
opacity: 0;
}
50% {
left: calc(100% - 100px);
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
.animate-element {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
animation-name: slideFade;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
綜上所述,CSS3中的@keyframes規則為我們構建豐富網頁動畫提供了強大而靈活的方式。熟練掌握這一特性,可以幫助我們創造更加生動有趣的Web體驗。
例
為 @keyframes 動畫指定一個名稱::
animation-name:mymove;-webkit-animation-name:mymove; /* Safari 和 Chrome */
瀏覽器支持
p>表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
屬性 | |||||
---|---|---|---|---|---|
animation-name | 43.04.0 -webkit- | 10.0 | 16.05.0 -moz- | 9.04.0 -webkit- | 30.015.0 -webkit-12.0 -o- |
標簽定義及使用說明
animation-name 屬性為 @keyframes 動畫指定名稱。
默認值: | none |
---|---|
繼承: | no |
版本: | CSS3 |
JavaScript 語法: | objectobject.style.animationName="mymove" |
語法
animation-name: keyframename|none;
值 | 說明 |
---|---|
keyframename | 指定要綁定到選擇器的關鍵幀的名稱 |
none | 指定有沒有動畫(可用于覆蓋從級聯的動畫) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
文介紹如何通過主 CSS 設置,實現圖像的基本特效,圖像懸停hover和圖像動畫。
.
通過設置 border-radius: px, em, 或 % 方式.
并可設置 top-left, top-right, bottom-right, and bottom-left. 單獨設置
/* slighty_rounded */
img {
border-radius: 15px;
}
/* ellipse from rectangle or circle from square*/
img {
border-radius: 50%;
}
通過工作width 自動生成縮圖效果
img {
border: 2px solid #ddd;
border-radius: 3px;
padding: 5px;
width: 350px;
}
整頁背景是修飾網頁的絕佳選擇,但一定要選擇不會壓倒性的圖像。這些背景特別適用于高分辨率圖像,您希望以足夠大的尺寸顯示,而無需觀眾單獨打開它們。
選項參數:
background-size::通常與background-position: center; 和background-repeat: no-repeat;;,等結合使用。
如,圖像居中,全屏顯示:
body {
background: url(example.jpg);
background-position: center;
background-size: cover;
}
響應式圖像會實時調整自身大小以適應用戶的瀏覽器大小,通過確保圖像不會在較小的屏幕上壓倒您的網站,并且在較大的屏幕上顯示較大的圖像來保護您的頁面設計。
如下面的示例以視口寬度的 70% 顯示圖像:
img {
max-width: 70vw;
height: auto;
}
使用 transform 屬性,可以將二維 (2D) 或三維 (3D) 效果應用于圖像。變換提供了用于縮放、旋轉、傾斜和更改圖像透視的選項。當與 JavaScript 或動畫模塊結合使用時,此屬性可以向圖像添加活動旋轉或移動。
transform 屬性相當新,舊版瀏覽器不完全支持。若要確保轉換在那里工作,請在屬性前面加上 -webkit-, -moz- 和 -ms-,如下例所示,該示例顯示了旋轉和傾斜圖像的轉換。
.
img {
-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/
-moz-transform: rotate(20deg) skewY(20deg); /Firefox/
-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
}
如懸停 放大
<img class=’hover_effect’ src=’example.jpg’/>
.hover_effect {
height:25%;
width: auto;
}
.hover_effect:hover {
height: 100%;
width: auto;
}
懸停透明度變化:
img {
width:1900px;
height:1900px;
opacity: 1;
}
img:hover {
opacity: 0.2;
}
動畫為圖像增添了流暢性,可以使它們具有交互性,同時利用上述效果以及其他效果。您可以通過以下兩種方式之一設置帶有動畫的圖像樣式,如下所述。
應用鼠標經過圖像效果的一種方法是,當用戶將鼠標懸停在圖像上時,它們似乎在圖像之間淡入淡出。您可以通過將一個圖像堆疊在另一個圖像之上并更改頂部圖像的不透明度來實現此目的。下面的代碼創建了一個淡出和淡入效果,當光標移到圖像上時開始,并在光標移開時立即反轉。頂部確保效果適用于較舊的Chrome和Firefox瀏覽器。
<div id="fade_out">
<img class="bottom" src="/images/image1.jpg" />
<img class="top" src="/images/image2.jpg" />
</div>
#fade_out {
position:relative;
height:100%;
width:auto;
margin:0 auto;
}
#fade_out img {
position:absolute;
left:0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
transition: opacity 2s linear;
}
#fade_out img.top:hover {
opacity:0;
}
您可以創建的另一個動畫是使用關鍵幀,這是一個 CSS 模塊,通過定義圖像狀態及其行為配置來實現該創建。
下面的代碼創建一個在兩個選定圖像之間交換的動畫。頂部定義關鍵幀的動畫模式。
<div id="fading">
<img class="bottom" src="banner55.jpg" />
<img class="top" src="banner02.jpg" />
</div>
@keyframes FadeInOut {
0% {opacity:1;}
25% {opacity:.75;}
50% {opacity:.5;}
100% {opacity:0;}
}
接下來,將該模式應用于圖像,定義過渡效果、重復動畫的次數、動畫的持續時間等。下面的代碼導致圖像在 10 秒循環中淡入淡出:
#fading img {
position:absolute;
left:0;
}
For Chrome, Mozilla, or Safari:
#fading img.top {
-webkit-animation-name: FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
}
For Internet Explorer:
#fading img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
在 CSS 中應用過濾器的最簡單方法是使用它們的函數。您需要做的就是將所需的過濾器添加為屬性及其在 CSS 文件中的值。語法如下:
filtered_elem {
filter: <filter-function>(value | none)
}
See this example with real values:
blurred_sepia_image {
filter: blur(3px) sepia(50%);
}
Name | Effect | Task and Parameters |
blur() | 高斯模糊. | 獲取一個長度值,該值定義高斯函數的標準偏差。該值必須是正數,并以非百分比表示,例如像素。 |
brightness() | 更改圖像的亮度。 | 取百分比。值越大,圖像越亮。. |
contrast() | 更改圖像對比度。 | 取百分比。值越大,對比度越高。 |
drop-shadow() | 圖像陰影。 | 在原始圖像后面應用特定顏色的圖像的模糊偏移版本。此函數采用兩個值:顏色和長度。長度值包括水平偏移、垂直偏移和可選標準偏差。默認值為顏色的“color”屬性和長度的零。 |
grayscale() | 灰度圖像 | 取百分比。值越大,圖像變得越灰。 |
hue-rotate() | 更改圖像的基本色調. | 以度為單位的角度作為調整色圈的參數。接受負數和 360 或更大的數字。 |
invert() | 反轉圖像顏色 | 取一個數字,該數字表示根據色圈反轉圖像的顏色。 |
opacity() | 透明度 | 取百分比。值越高,圖像越不透明。 |
saturate() | 更改圖像的顏色飽和度 | 取百分比。值越高,圖像的飽和度越高。 |
sepia() | 使圖像棕褐色色調 | 取百分比。值越高,圖像的紅棕色越柔和。 |
Animations 動畫方式旋轉
若要對旋轉進行動畫處理,請應用 CSS 過渡屬性以指定轉換的其他屬性以及轉換時間。例如,以下代碼導致旋轉在半秒內發生,啟動速度較慢。
.rotate {
transition: transform 0.5s ease-in;
}
Rotation point 旋轉點
默認情況下,圖像圍繞其中心點旋轉。要使圖像圍繞另一個點旋轉,請使用 CSS 中的轉換原點屬性指定該點。
如果手動定義,中心點為 50% 50%。您可以更改 2D 圖像的 x 和 y 值以及 3D 圖像的 z 值。例如:
旋轉原點設置在右上角:
.rotate {
transform-origin: 100% 0%;
}
旋轉原點設置在左上角:
.rotate {
transform-origin: 0% 0%;
}
For more cool tri
*請認真填寫需求信息,我們會在24小時內與您取得聯系。