CSS3 過渡(Transition)

發(fā)布時(shí)間：2020-07-04 06:50:17 來(lái)源：網(wǎng)絡(luò) 閱讀：457 作者：frwupeng517 欄目：開發(fā)技術(shù)

過渡 transition

復(fù)合屬性，使CSS屬性值在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果

取值：

<'transition-property'>：檢測(cè)或設(shè)置對(duì)象中參與過渡的屬性

<'transition-duration'>：檢測(cè)或設(shè)置對(duì)象過渡的持續(xù)時(shí)間

<'transition-timing-function'>：檢測(cè)或設(shè)置對(duì)象中過渡的動(dòng)畫類型

<'transition-delay'>：檢測(cè)或設(shè)置對(duì)象延遲過渡的時(shí)間

1、過渡屬性 <'transition-property'>

取值：none | all | property

例如：transition-property: width;

transition-property: border-color, background-color, color;

2、過渡時(shí)間 <'transition-duration'>

取值：以 s | ms 作為單位

3、過渡時(shí)間曲線函數(shù) <'transition-timing-function'>

取值：預(yù)定的值或貝塞爾曲線

ease：默認(rèn)值，慢速開始，快速變快，再慢速結(jié)束

linear：勻速

ease-in：慢速開始，加速效果

ease-out：快速開始，減速效果

ease-in-out：慢速開始和結(jié)束，中間先加后減

4、過渡延遲 <'transition-delay'>

取值：以 s | ms 作為單位

語(yǔ)法：transition: property duration timing-function delay;

例如：

transition: transform 2s, border-radius 2s

transition: all .5s ease-in .1s;

激發(fā)過渡效果：現(xiàn)階段，只能通過鼠標(biāo)移入時(shí)進(jìn)行激發(fā)

兼容性：

CSS3 過渡(Transition)

代碼示例一：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #d1{
      width:200px;
      height:200px;
      background-color:#369;

      text-align:center;
      line-height:200px;
      font-size:18px;

      /*1、過渡屬性*/
      transition-property:all;
      /*2、過渡時(shí)間*/
      transition-duration:2s;
      /*3、速度曲線函數(shù)*/
      transition-timing-function:linear;
      /*4、延遲*/
      transition-delay:0s;
      
    }
    #d1:hover{
      /*通過轉(zhuǎn)換-位移實(shí)現(xiàn) 位置向右移動(dòng) 200px*/
      transform:translate(500px) rotate(360deg);
      border-radius:50%;
      background-color:#693;
    }
  </style>
 </head>
 <body>
  <div id="d1">滾動(dòng)的元素</div>
 </body>
</html>

滾動(dòng)前：

CSS3 過渡(Transition)

滾動(dòng)中：

CSS3 過渡(Transition)

代碼示例二：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
	h2{font-size:16px;}
	.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
	.test li{float:left;width:100px;height:100px;margin:0 5px;border:1px solid #ddd;background-color:#eee;text-align:center;
		-webkit-transition:background-color 3.5s ease-in;
		-moz-transition:background-color 3.5s ease-in;
		transition:background-color 3.5s ease-in;
	}
	.test li:nth-child(1):hover{background-color:#bbb;}
	.test li:nth-child(2):hover{background-color:#999;}
	.test li:nth-child(3):hover{background-color:#630;}
	.test li:nth-child(4):hover{background-color:#090;}
	.test li:nth-child(5):hover{background-color:#f00;}
</style>
</head>
<body>
	<h2>請(qǐng)將鼠標(biāo)移動(dòng)到下面的矩形上：</h2>
	<ul class="test">
		<li>背景色過渡</li>
		<li>背景色過渡</li>
		<li>背景色過渡</li>
		<li>背景色過渡</li>
		<li>背景色過渡</li>
	</ul>
  
 </body>
</html>

CSS3 過渡(Transition)

向AI問一下細(xì)節(jié)

CSS3 過渡(Transition)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽