HTML特效方塊是Web開發(fā)中常用的元素，可以為網(wǎng)站增添動(dòng)態(tài)與美感。下面是一些常用的HTML特效方塊代碼，讓我們一起來學(xué)習(xí)吧！

1. 簡(jiǎn)單的特效方塊

.box {
width: 100px;
height: 100px;
background-color: red;
transition: all .2s ease-in-out;
}
.box:hover {
transform: scale(1.1);
}

2. 煙花特效方塊

.box {
width: 100px;
height: 100px;
background-color: #9b4dca;
animation: fireworks 2s linear infinite;
}
@keyframes fireworks {
0% {
transform: scale(1);
opacity: 1;
}
25% {
transform: scale(1.5);
opacity: 0.7;
}
50% {
transform: scale(2);
opacity: 0.4;
}
75% {
transform: scale(3);
opacity: 0.2;
}
100% {
transform: scale(4);
opacity: 0;
}
}

3. 快速閃爍的特效方塊

.box {
width: 100px;
height: 100px;
background-color: yellow;
animation: blink 1s linear infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}

4. 會(huì)跳舞的特效方塊

.box {
width: 100px;
height: 100px;
background-color: blue;
animation: dance 1s linear infinite;
}
@keyframes dance {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(20px, -20px);
}
50% {
transform: translate(40px, 0);
}
75% {
transform: translate(20px, 20px);
}
100% {
transform: translate(0, 0);
}
}

通過以上特效方塊代碼，我們可以實(shí)現(xiàn)各種效果，讓網(wǎng)站更加生動(dòng)有趣。