在網頁設計中，特效代碼是提升用戶體驗的一種常用手段。今天我們介紹一種常見的特效代碼——HTML煙花效果。
<html>
<head>
<meta charset="UTF-8">
<title>煙花特效效果</title>
<style>
.firework{
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: orange;
animation: explode 2s ease-out forwards;
}
@keyframes explode{
0%{
transform: scale(0);
opacity: 1;
}
30%{
transform: scale(1.5);
opacity: 0.7;
}
100%{
transform: scale(5);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
//隨機顏色生成函數
function randomColor(){
var color = "#";
for (var i = 0; i< 6; i++){
color += Math.floor(Math.random() * 16).toString(16);
}
return color;
}
//創建煙花函數
function createFireworks() {
var firework = document.createElement("div");
firework.className = "firework";
var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
var x = Math.floor(Math.random() * screenWidth);
var y = Math.floor(Math.random() * screenHeight);
firework.style.left = x + "px";
firework.style.top = y + "px";
firework.style.background = randomColor();
document.body.appendChild(firework);
//移除煙花元素
setTimeout(function(){
document.body.removeChild(firework);
}, 3000);
}
//定時創建煙花
setInterval(createFireworks, 500);
</script>
</body>
</html>以上為HTML煙花效果的實現代碼。實現起來也相對簡單，主要使用了CSS3動畫和JavaScript的定時器和節點操作。通過創建一個div元素并設置其樣式實現煙花效果，每隔一段時間重復創建，掌握以上代碼，你也可以為你的網頁增加別樣的特效喲！
上一篇css 塊級元素轉換
下一篇html特效代碼大全表白