HTML特效是網(wǎng)頁設(shè)計中不可或缺的一部分，可以讓網(wǎng)站變得更加有趣和動態(tài)。在這里，我們介紹幾個常用的HTML特效代碼源碼。
<!DOCTYPE html>
<html>
<head>
<style>
/* 設(shè)置圖片的初始位置 */
#img {
position: absolute;
left: 0px;
top: 0px;
}
/* 給圖片設(shè)置動畫效果 */
@keyframes slide {
from {
left: 0px;
}
to {
left: 200px;
}
}
/* 觸發(fā)動畫效果 */
#img:hover {
animation: slide 1s forwards;
}
</style>
</head>
<body>
<img id="img" src="img.jpg">
</body>
</html>以上代碼可以讓一張圖片在用戶鼠標(biāo)懸停時向右滑動至200像素的位置。在CSS樣式表中，我們設(shè)置了圖片的初始位置，同時為其設(shè)置了動畫效果的關(guān)鍵幀和觸發(fā)動畫效果的事件。
<!DOCTYPE html>
<html>
<head>
<style>
/* 設(shè)置文本的顏色和字體 */
h1 {
color: blue;
font-size: 50px;
font-weight: 500;
font-family: Arial, sans-serif;
}
/* 觸發(fā)文字效果 */
h1:hover {
text-shadow: 2px 2px 2px grey;
}
</style>
</head>
<body>
<h1>Welcome to our website</h1>
</body>
</html>以上代碼可以使網(wǎng)頁中的H1標(biāo)簽文字在用戶鼠標(biāo)懸停時顯示出陰影效果，為文字添加更加具有視覺感受的效果。在CSS樣式表中，我們設(shè)置了文字的顏色、字體、大小和粗細(xì)，并為其添加了文字陰影的效果。
<!DOCTYPE html>
<html>
<head>
<style>
/* 設(shè)置文字的初始樣式 */
p {
font-size: 20px;
color: black;
font-family: Arial, sans-serif;
text-align: center;
}
/* 觸發(fā)文字效果 */
p:hover {
transform: rotate(20deg);
transition: all 1s ease;
}
</style>
</head>
<body>
<p>Our team is dedicated to providing top quality service</p>
</body>
</html>以上代碼可以使網(wǎng)頁中的段落文字在鼠標(biāo)懸停時旋轉(zhuǎn)20度，為文字添加更加炫目的效果。在CSS樣式表中，我們設(shè)置了文字的初始樣式，并為其添加了動畫效果的transition屬性和transform屬性。
上一篇vue橫向滾動文本
下一篇html特效全屏代碼