溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么實現css3過渡動畫的效果，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
首先我們來看一看transition屬性的定義和用法：
transition 屬性是一個簡寫屬性，用于設置四個過渡屬性。
transition-property：規定設置過渡效果的 CSS 屬性的名稱。
transition-duration：規定完成過渡效果需要多少秒或毫秒。
transition-timing-function：規定速度效果的速度曲線。
transition-delay：定義過渡效果何時開始。
在看完了簡單介紹的transition屬性定義和用法之后。
現在我們具體來看一個css3實現過渡效果的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小效果</title>
<style type="text/css">
/*通配符重置瀏覽器默認的兩個值，
對本文沒有太大影響，不知道可以無視*/
*{
margin: 0;
padding: 0;
}
.div1{
width: 400px;
height: 100px;
padding-top: 20px;
line-height: 100px;
margin:200px auto 0;
text-align: center;
font-size: 40px;
font-weight: bold;
font-family: "華文行楷";
background: #000;
color:#F60;
transition-property: all;/*變化的東西。all是所有*/
transition-duration: 1s;/*變化過程的時間*/
transition-timing-function: linear;/*linear是勻速變化*/
transition-delay: 0s;/*沒有延遲變化*/
/*下面的是簡寫屬性*/
/*
transition:all 1s linear 0s;
*/
}
.div1:hover{
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
</style>
</head>
<body>
<div>億速云火焰字</div>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享怎么實現css3過渡動畫的效果內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
