css3如何實現縮放動畫效果
Dec 08, 2021 pm 02:26 PM
css
css中,可利用「@keyframes」規則、animation和transform屬性實作縮放動畫效果,語法為「元素{animation:名稱時間}@keyframes 名稱{100%{transform:scale(x,y );}}」。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
css3如何實現縮放動畫效果
#在css中可以利用animation屬性和@keyframes 規則來實現元素縮放的動畫效果,透過@keyframes 規則,能夠創建動畫。
創建動畫的原理是,將一套 CSS 樣式逐漸改變為另一套樣式。在動畫過程中,您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間,或透過關鍵字 "from" 和 "to",等價於 0% 和 100%。 0% 是動畫的開始時間,100% 動畫的結束時間。為了獲得最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。
還有transform屬性用來設定元素縮放效果。 transform 屬性向元素套用 2D 或 3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
範例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css</title> <style> img{ animation:fadenum 5s ; } @keyframes fadenum{ 100%{transform:scale(0.5,0.5);} } </style> </head> <body> <img src="/static/imghw/default1.png" data-src="1118.02.png" class="lazy" alt="css3如何實現縮放動畫效果" > </body> </html>
登入後複製
輸出結果:
#(學習影片分享:css影片教學)
以上是css3如何實現縮放動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)