溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3動畫@keyframes圖片變大變小顏色變化的示例

發(fā)布時間：2021-01-25 11:10:15 來源：億速云 閱讀：381 作者：小新 欄目：web開發(fā)

小編給大家分享一下CSS3動畫@keyframes圖片變大變小顏色變化的示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

html：

<body>
    <p class="color"></p>
    <img class="change" src="img/dongtai.png"/>
</body>

原理是這樣的：body相對定位，.change絕對定位到.color上面，大小和.color一樣，第一次刷新先顯示.color，然后.change的透明度逐漸改變，與此同時，他們兩個的大小也同時在改變

CSS

body{
	position: relative;
}
.color{width:308px;height: 174px;background-color: lightskyblue;}
.change{
	position: absolute;
	top: 0;
	left: 0;
	animation-name: mychange;			/*動畫的名字*/
	animation-duration: 1000ms;		/*定義動畫完成一個周期所需要的時間，以秒或毫秒計*/
	animation-iteration-count: infinite;		/*定義動畫的播放次數(shù)，這里是無限播放*/
	animation-direction: alternate;			/*定義是否應(yīng)該輪流反向播放動畫，這里是動畫輪流播放*/
}
.color{
	animation-name: mycolor;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes mychange{　　　　/*mychange是動畫的名字上面有用到*/
	0% {
		opacity: .2;
		width: 308px;
		height: 174px;
	}
	100% {
		opacity: 1;
		width: 358px;
		height: 202px;
	}
}
@keyframes mycolor{
	0% {
		width: 308px;
		height: 174px;
	}
	100% {
		width: 358px;
		height: 202px;
	}
}

.color和.change的大小都是從寬：308px，高202px  -->變化到寬358px，高174px。

看完了這篇文章，相信你對“CSS3動畫@keyframes圖片變大變小顏色變化的示例”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手