css過渡transition屬性


一、CSS3 過渡

(一)、CSS3過渡簡介

CSS3過渡是元素從一種樣式逐漸改變為另一種的效果。

 

實現過渡效果的兩個要件:

 

  • 規定把效果添加到哪個 CSS 屬性上
  • 規定效果的時長

定義動畫的規則

過渡transition  (作用) 將元素的某個屬性從“一個值”在指定的時間內過渡到“另一個值”

(二)、transition屬性

   語法 :   {transition: 屬性名 持續時間 過渡方法 }

transition-timing-function  屬性取值

示例:

利用transition設置過渡的實例

<!doctype html>
<html>
<head>
<title></title>
<style>
div
{
width:100px;
height:100px;
background:blue;

transition:width 2s; } div:hover { width:600px; height:600px; text-align: center; line-height:100px; background:url(1.jpg); background-position:top; background-repeat: no-repeat; } </style> </head> <body> <div>kaka</div> </body> </html>

從一個正方體

 

過渡到一個背景圖片

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM