整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          詳解CSS中@keyframes:動畫制作的藝術

          詳解CSS中@keyframes:動畫制作的藝術

          在現代Web開發中,CSS3的@keyframes規則為網頁動態效果的創建提供了強大的原生支持。通過定義關鍵幀動畫,我們可以實現從一個樣式狀態平滑過渡到另一個樣式狀態的過程,讓網頁元素動起來,提升用戶體驗和視覺效果。本文將詳細介紹@keyframes的工作原理、使用方法以及示例應用。

          一、什么是@keyframes?

          @keyframes是CSS3中的一個重要特性,用于創建動畫。它允許開發者定義一組或多組樣式變化過程(關鍵幀),瀏覽器會自動計算中間幀,從而生成流暢的動畫效果。每個關鍵幀都代表了動畫過程中的某一特定時間點的樣式狀態。

          二、@keyframes語法結構

          @keyframes 動畫名稱 {
            0% { /* 初始狀態樣式 */ }
            50% { /* 中間狀態樣式 */ }
            100% { /* 結束狀態樣式 */ }
          }
          
          /* 或者多個關鍵幀 */
          @keyframes 動畫名稱 {
            0% { ... }
            25% { ... }
            50% { ... }
            75% { ... }
            100% { ... }
          }
          
          • 動畫名稱:自定義的關鍵幀動畫的名字,用于在需要動畫的元素上引用該動畫。
          • %:表示動畫進度,0%為動畫開始,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-name43.04.0 -webkit-10.016.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和圖像動畫。

          Creating Basic Image Effects With CSS使用 CSS 創建基本圖像效果

          .

          Rounded Corners 圓角效果

          通過設置 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;
          }
          


          Full-Page Backgrounds 全頁背景

          整頁背景是修飾網頁的絕佳選擇,但一定要選擇不會壓倒性的圖像。這些背景特別適用于高分辨率圖像,您希望以足夠大的尺寸顯示,而無需觀眾單獨打開它們。

          選項參數:

          • auto: 設定原始大小。.
          • length: 圖像長度.
          • percentage:圖像長度、寬度的百分比
          • cover: 調整圖像大小以覆蓋視口,有時需要拉伸或裁剪。.
          • contain: 將圖像大小調整為無需裁剪即可適應視口的最大大小。

          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;
          }

          Image Transformations 圖像變換

          使用 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;
          }
          

          Application of CSS Image Filters 圖像濾鏡

          在 CSS 中應用過濾器的最簡單方法是使用它們的函數。您需要做的就是將所需的過濾器添加為屬性及其在 CSS 文件中的值。語法如下:

          filtered_elem {
          filter: <filter-function>(value | none)
          }
          
          See this example with real values:
          
          blurred_sepia_image {
          	filter: blur(3px) sepia(50%);
          }
          

          Functions of CSS Image Filters 圖像濾鏡函數


          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


          主站蜘蛛池模板: 午夜一区二区免费视频| 少妇激情AV一区二区三区| 亚洲熟女综合一区二区三区| 免费在线视频一区| 亚洲AV无码片一区二区三区| 中文人妻无码一区二区三区| 国产精品免费综合一区视频| 黑巨人与欧美精品一区| 精品一区二区ww| 在线电影一区二区三区| 最新中文字幕一区| 日本免费一区二区三区最新| 无码一区18禁3D| 日本福利一区二区| 一区二区三区www| 香蕉久久AⅤ一区二区三区 | 一区国严二区亚洲三区| av在线亚洲欧洲日产一区二区| 国产精品久久亚洲一区二区| 精品一区二区三区在线视频观看| 日韩视频在线一区| 变态拳头交视频一区二区| 免费av一区二区三区| 日韩一区二区视频| 国产aⅴ精品一区二区三区久久| 一区二区三区在线观看视频| 中文国产成人精品久久一区| 无码人妻品一区二区三区精99| 一区二区三区四区精品视频| 精品亚洲福利一区二区| 色噜噜AV亚洲色一区二区| 精品乱码一区二区三区四区| 波多野结衣一区二区免费视频| 亚洲AV无码一区二区三区鸳鸯影院| 国产精品一区二区不卡| 国产免费一区二区三区免费视频| 久久精品一区二区免费看| 日本精品一区二区三本中文| 国模吧一区二区三区| 日韩伦理一区二区| 一区二区在线免费观看|