亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長(zhǎng)資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    css3怎么讓一張圖片旋轉(zhuǎn)

    在css3中,可以使用animation屬性和“@keyframes”規(guī)則給圖片添加旋轉(zhuǎn)動(dòng)畫(huà)來(lái)讓圖片旋轉(zhuǎn)起來(lái)。實(shí)現(xiàn)步驟:1、使用“@keyframes 動(dòng)畫(huà)名稱(chēng) {50% {transform: rotate(旋轉(zhuǎn)角度);}”語(yǔ)句創(chuàng)建旋轉(zhuǎn)動(dòng)畫(huà);2、使用“圖片元素{animation:動(dòng)畫(huà)名稱(chēng) 時(shí)間 infinite;}”語(yǔ)句將旋轉(zhuǎn)動(dòng)畫(huà)應(yīng)用于指定圖片元素中即可。

    css3怎么讓一張圖片旋轉(zhuǎn)

    如何快速入門(mén)VUE3.0:進(jìn)入學(xué)習(xí)

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

    在css3中,可以使用animation屬性和“@keyframes”規(guī)則給圖片添加旋轉(zhuǎn)動(dòng)畫(huà)來(lái)讓圖片旋轉(zhuǎn)起來(lái)

    • @keyframes是CSS3的一種規(guī)則,可以用來(lái)定義CSS動(dòng)畫(huà)的一個(gè)周期的行為,可以創(chuàng)建簡(jiǎn)單的動(dòng)畫(huà)。

    • animation(動(dòng)畫(huà))屬性用于將動(dòng)畫(huà)應(yīng)用于指定元素;使用不同的CSS animation屬性,可以控制動(dòng)畫(huà)的許多不同方面,包括動(dòng)畫(huà)迭代的次數(shù),是否在開(kāi)始和結(jié)束值之間交替,以及動(dòng)畫(huà)是否應(yīng)該運(yùn)行或暫停。動(dòng)畫(huà)也可以延遲其開(kāi)始時(shí)間。

    語(yǔ)法:

    /* 定義動(dòng)畫(huà)*/ @keyframes 動(dòng)畫(huà)名稱(chēng){     /* 樣式規(guī)則*/ }  /* 將它應(yīng)用于元素 */ .element {     animation-name: 動(dòng)畫(huà)名稱(chēng)(在@keyframes中已經(jīng)聲明好的);     /* 或使用動(dòng)畫(huà)簡(jiǎn)寫(xiě)屬性*/     animation: 動(dòng)畫(huà)名稱(chēng) 1s ... }

    想要定義旋轉(zhuǎn)動(dòng)畫(huà),需要使用transform屬性;在“@keyframes”規(guī)則中使用transform: rotate(旋轉(zhuǎn)角度)控制旋轉(zhuǎn)動(dòng)作即可。

    實(shí)現(xiàn)代碼:

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

    css3怎么讓一張圖片旋轉(zhuǎn)

    說(shuō)明:animation(動(dòng)畫(huà))屬性

    說(shuō)明
    animation 一個(gè)簡(jiǎn)寫(xiě)屬性。
    animation-name 指定要綁定到選擇器的關(guān)鍵幀的名稱(chēng)
    animation-duration 動(dòng)畫(huà)指定需要多少秒或毫秒完成
    animation-timing-function 設(shè)置動(dòng)畫(huà)將如何完成一個(gè)周期
    animation-delay 設(shè)置動(dòng)畫(huà)在啟動(dòng)前的延遲間隔。
    animation-iteration-count 定義動(dòng)畫(huà)的播放次數(shù)。
    animation-direction 指定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。
    animation-fill-mode 規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)(當(dāng)動(dòng)畫(huà)完成時(shí),或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)),要應(yīng)用到元素的樣式。
    animation-play-state 指定動(dòng)畫(huà)是否正在運(yùn)行或已暫停。

    (學(xué)習(xí)視頻分享:web前端入門(mén))

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