HTML的特效可以通過CSS和JavaScript實現。下面將介紹一些常見的特效以及相應的代碼實現示例。
1. 點擊按鈕彈出彈框
HTML代碼:
<button onclick="alert('Hello, World!')">點擊我</button>CSS代碼:
無需CSS樣式2. 圖片懸浮效果 HTML代碼:
<img src="圖片鏈接" onmouseover="this.src='懸浮后圖片鏈接'" onmouseout="this.src='正常圖片鏈接'">CSS代碼:
無需CSS樣式3. 點擊切換圖片 HTML代碼:
<img id="myImg" src="圖片1鏈接" onclick="changeImg()">JavaScript代碼:
function changeImg() { var img = document.getElementById("myImg"); if (img.src.match("圖片1鏈接")) { img.src = "圖片2鏈接"; } else { img.src = "圖片1鏈接"; } }4. 滾動出現動畫 HTML代碼:
<div class="animated"></div>CSS代碼:
.animated { animation-name: slideInLeft; animation-duration: 1s; } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }5. 鼠標滾輪滑動 HTML代碼:
無需HTML代碼JavaScript代碼:
document.addEventListener("wheel", function(event) { if (event.deltaY >0) { // 向下滾動 } else { // 向上滾動 } });以上是一些常見的HTML特效及其代碼實現,希望能對您有所幫助。