HTML特效是網頁設計中非常重要的一部分,可以讓網站更加生動、吸引人。下面將為大家介紹一些HTML特效的簡單代碼。
/* 設置文字閃爍特效 */ <style> blink { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } </style> <p><blink>請注意,這句話正在閃爍!</blink></p>
上面的代碼使用CSS的動畫效果,為文字添加閃爍特效。'opacity'屬性控制文字的透明度,從而實現閃爍的效果。'animation'屬性則設置動畫的細節,包括動畫名稱、持續時間、動畫速度等。
/* 設置圖片滑動特效 */ <style> .container { width: 500px; height: 300px; position: relative; } .container img { position: absolute; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 50% { left: -100%; } 100% { left: 0; } } </style> <div class="container"> <img src="img1.jpg" /> <img src="img2.jpg" /> <img src="img3.jpg" /> </div>
上面的代碼可以實現圖片輪播的滑動特效。'position'屬性使得圖片能夠在容器中定位,'animation'屬性則設置動畫的名稱和方向。'keyframes'部分則詳細指定了動畫的過程,包括圖片滑動的方向和時間。在 HTML 中,我們創建了一個容器 '< div class="container" >',并在其中放置了多張圖片 '< img src="..."/ >',通過設置 'position' 和 'animation' 屬性,實現了動態的圖片滑動特效。
上一篇html登陸頁面模板代碼
下一篇html登陸頁面現成代碼