使用css3讓網頁元素透過樣式實現動畫效果代碼
使用css3可以在不使用javascript和flash的情況下讓網頁元素透過樣式實現動畫效果，讓網站更加酷炫。
css3過渡
#過度動畫（trainsition)屬性就可以實現讓元素樣式的過度，trainsition支援的瀏覽器有ie10，firefox，chrome和opera。
先來看看trainsition的幾個屬性：
#trainsition-property:規定應用過渡的css屬性名稱。
trainsition-duration:規定過度花費的時間。
trainsiton-timing-function:規定過度的時間曲線.
trainsition-delay：規定過渡何時開始。
先看一個簡單的過度例子，在demo.css中寫上
p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}
p:hover
{
width:300px;
height:200px;
}在demo.html中寫上
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demo.css"/> </head> <body> <p></p> </body> </html>
把滑鼠移到紅色p塊上就可以看見紅色的塊長和寬慢慢的增加，這就是過渡的最簡單實現。
注意：過渡時間不設定的話，預設為0。就是不會出現過渡的效果。
我們更常使用的方法是透過js來新增樣式來實習各種動畫過渡，如下：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
background:red;
width:200px;
height:200px;
transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
<body>
<p
</p>
<script>
$('p').hover(function(){
$('p').addClass('over');},
function(){
$('p').removeClass('over');
});
</script>
</body>
</html>更改程式碼中透過jquery在滑鼠劃過時添加了over的樣式，在滑鼠離開時移除了over樣式，由於在p樣式裡設定了transition屬性，所以實現了過渡動畫。
但是上面雖然實現樣式的改變，我們可以看出該改變是從一個初狀態到末狀態的改變，限制非常大，所以我們希望有中間狀態的轉換。這時候就要用到關鍵影格動畫(@keyframes)：
其基本格式為：
@keyframes 名稱｛
時間點｛元素狀態｝
#....
｝
如我們可以用
@frames chgground{
from{ backgroud:red;}
to{backgroud:yellow;}
}定義裡關鍵影格動畫之後還要把它綁定到一個要套用的元素中才可以，如：
p{
animation:chgbackground 3s;
}我們用animation來綁定，該元素的屬性有：
p就有了chgbackground的動畫，我們也可以使用百分比來指定關鍵影格的狀態，from to 就是0%和% 100，如下程式碼
@frames chgbackground{
0%{background:yellow;}
50%{background:red;}
100%{background:black;}
}t透過該程式碼就可以實現背景在0%到50%和50%到100%時不一樣的漸變效果。
使用animate.css只要下載animate.css並在引用該文件，在需要的地方加上上特定的動畫類名，就可以實現各種效果，如：
< ;script>$('p').addClass('shake');就可以輕鬆的加入元素抖動效果。
#
以上是使用css3讓網頁元素透過樣式實現動畫效果代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
純CSS3怎麼實現波浪效果？ （程式碼範例）
Jun 28, 2022 pm 01:39 PM
純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！
css怎麼隱藏元素但不佔空間
Jun 01, 2022 pm 07:15 PM
兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。
Vue頁面過渡動畫實現及常用動畫效果
Jun 09, 2023 pm 04:11 PM
Vue是一款受歡迎的JavaScript框架，它透過資料驅動的方式，協助開發者建立互動性強、資料呈現美觀的單頁網頁應用程式。 Vue內建了許多有用的特性，其中之一就是頁面過渡動畫。在本文中，我們將介紹如何使用Vue的過渡動畫功能，並討論最常見的動畫效果。實現Vue頁面過渡動畫Vue的頁面過渡動畫是透過Vue的<transition>與<tr
JavaScript 取得網頁元素詳解
Apr 09, 2024 pm 12:45 PM
答：JavaScript提供了多種取得網頁元素的方法，包括使用id、標籤名、類別名稱和CSS選擇器。詳細描述：getElementById(id)：根據唯一id取得元素。 getElementsByTagName(tag)：取得具有指定標籤名的元素組。 getElementsByClassName(class)：取得具有指定類別名稱的元素組。 querySelector(selector)：使用CSS選擇器取得第一個符合元素。 querySelectorAll(selector)：使用CSS選擇器取得所有匹配
使用uniapp實現頁面過渡動畫效果
Nov 21, 2023 pm 02:38 PM
隨著行動互聯網的快速發展，越來越多的程式設計師開始使用uniapp建立跨平台應用程式。在行動應用開發中，頁面過渡動畫對使用者體驗升級起著非常重要的作用。透過頁面轉換動畫，能夠有效增強使用者體驗，提高使用者留存率和滿意度。因此，以下就來分享如何使用uniapp實現頁面過渡動畫效果，同時提供具體程式碼範例。一、uniapp介紹uniapp是DCloud開發團隊推出的一款基
如何透過純CSS實現漂浮動畫效果的方法與技巧
Oct 25, 2023 am 08:10 AM
如何透過純CSS實現漂浮動畫效果的方法和技巧在現代網頁設計中，動畫效果已成為吸引用戶眼球的重要元素之一。而其中一個常見的動畫效果就是漂浮效果，它可以為網頁增加一種動感和活力，使得使用者體驗更加豐富有趣。本文將介紹如何透過純CSS實現漂浮動畫效果，並提供一些程式碼範例供參考。一、使用CSS的transition屬性來實現漂浮效果CSS的transition屬性可
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
