HTML是一種強大的編程語言,可以用來創建各種頁面效果。其中一種最受歡迎的效果是動畫特效。HTML動畫特效能讓網站更吸引人,更有趣,給訪問者帶來更好的體驗。
接下來,我們將介紹幾種HTML動畫特效代碼,可以為您的網站增添效果。
/* 1. 放大縮小效果 */
<div class="box zoom"></div>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.zoom:hover {
transform: scale(1.2);
}
/* 2. 移動效果 */
<div class="box move"></div>
.move {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation: move 2s infinite;
}
@keyframes move {
0% { left: 0; }
50% { left: 50%; }
100% { left: 100%; }
}
/* 3. 翻轉效果 */
<div class="box flip"></div>
.flip {
width: 100px;
height: 100px;
background-color: green;
perspective: 1000px;
}
.flip:hover .inner {
transform: rotateY(180deg);
}
.inner {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 1s;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
font-size: 30px;
color: white;
}
.front {
background-color: orange;
}
.back {
background-color: purple;
transform: rotateY(180deg);
}