色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3動畫方法

錢旭東1年前7瀏覽0評論

CSS3動畫是網頁設計中越來越常見的一種技術,本文將介紹一些CSS3動畫的方法。

1. transition過渡動畫

div {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 1s ease;
}
div:hover {
background-color: red;
}

在這個例子中,當鼠標放到div上時,div的背景色會從藍色漸變為紅色,過渡時間為1秒。

2. transform變換

div {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(30deg);
}

在這個例子中,div被旋轉了30度。

3. animation動畫

div {
width: 100px;
height: 100px;
background-color: blue;
animation: myanim 1s infinite;
}
@keyframes myanim {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

在這個例子中,div會不斷縮放,從正常大小到稍微變大,再回到正常大小。

4. keyframe關鍵幀動畫

div {
width: 100px;
height: 100px;
background-color: blue;
animation: myanim 1s infinite;
}
@keyframes myanim {
0% {
background-color: blue;
}
50% {
background-color: red;
}
100% {
background-color: blue;
}
}

在這個例子中,div的背景色將不斷閃爍,從藍色變為紅色,再變回藍色。

總結:

CSS3動畫可以讓網頁更加生動有趣,transition和transform比較簡單易懂,但動畫效果不夠酷炫;animation和keyframe能實現更加復雜的動畫效果,但寫法相對麻煩。

上一篇loop php