久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      CSS3設置動畫的相關屬性有哪些

      動畫相關屬性有:transform、transform-origin、transition、“@keyframes”、animation、animation-name、animation-duration、animation-delay等。

      CSS3設置動畫的相關屬性有哪些

      本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

      css3有三種動畫分為:transform、transition、animation

      1、transform(2D/3D 轉(zhuǎn)換屬性)

      屬性 說明 CSS
      transform 適用于2D或3D轉(zhuǎn)換的元素 3
      transform-origin 允許您更改轉(zhuǎn)化元素位置 3
      transform-style 3D空間中的指定如何嵌套元素 3
      perspective 指定3D元素是如何查看透視圖 3
      perspective-origin 指定3D元素底部位置 3
      backface-visibility 定義一個元素是否應該是可見的,不對著屏幕時 3

      2、transition(過渡屬性)

      屬性 說明 CSS
      transition 此屬性是 transition-property、transition-duration、transition-timing-function、transition-delay 的簡寫形式。 3
      transition-property 設置用來進行過渡的 CSS 屬性。 3
      transition-duration 設置過渡進行的時間長度。 3
      transition-timing-function 設置過渡進行的時序函數(shù)。 3
      transition-delay 指定過渡開始的時間。 3

      3、animation(動畫屬性)

      屬性 描述 CSS
      @keyframes 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用。 3
      animation 復合屬性。檢索或設置對象所應用的動畫特效。 3
      animation-name 檢索或設置對象所應用的動畫名稱 ,必須與規(guī)則@keyframes配合使用,因為動畫名稱由@keyframes定義 3
      animation-duration 檢索或設置對象動畫的持續(xù)時間 3
      animation-timing-function 檢索或設置對象動畫的過渡類型 3
      animation-delay 檢索或設置對象動畫的延遲時間 3
      animation-iteration-count 檢索或設置對象動畫的循環(huán)次數(shù) 3
      animation-direction 檢索或設置對象動畫在循環(huán)中是否反向運動 3
      animation-play-state 檢索或設置對象動畫的狀態(tài) 3

      示例:

      <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<style> 			div { 				width: 50px; 				height: 50px; 				background: red; 				margin: 100px; 				animation: mymove 5s infinite; 				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */ 			}  			@keyframes mymove { 				50% { 					width: 150px; 					height: 150px; 					transform: rotate(360deg); 				}  			}  			@-webkit-keyframes mymove{  /* Safari and Chrome */ 				50% { 					width: 100px; 					height: 100px; 					transform: rotate(360deg); 				}  			} 		</style> 	</head> 	<body>  		<div></div>  	</body> </html>

      CSS3設置動畫的相關屬性有哪些

      (學習視頻分享:css視頻教程)

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號