HTML和CSS是如今最流行的網頁開發語言，他們不僅可以制作出美觀的界面，還可以加入許多特效來提升用戶體驗。下面是一些HTML和CSS特效代碼的實例：

1. CSS動畫

/* 定義框的樣式 */
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s infinite;
}
/* 定義動畫 */
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}

2. 翻轉動畫

/*定義卡片的樣式*/
.card {
width: 200px;
height: 200px;
perspective: 1000px; //透視效果
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0);
}
/*定義正反面樣式*/
.front {
position: absolute;
backface-visibility: hidden; //不顯示背面內容
}
.back {
position: absolute;
backface-visibility: hidden;
transform: rotateY(-180deg);
}

3. 滑動遮罩效果

/*定義遮罩*/
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
opacity: 0;
transition: 0.5s ease;
}
/*定義圖片*/
.image {
display: block;
width: 100%;
height: auto;
transition: 0.5s ease;
}
/*懸停時遮罩動畫*/
.container:hover .overlay {
opacity: 1;
}
.container:hover .image {
filter: grayscale(100%);
}

4. 閃爍效果

.title {
color: #333;
position: relative;
}
.title:before {
content: "";
position: absolute;
top: 0;
left: -10px;
background-color: yellow;
width: 10px;
height: 100%;
animation: blink 1s infinite alternate;
}
/*閃爍動畫*/
@keyframes blink {
0% { opacity: 0; }
100% { opacity: 1; }
}

這些特效代碼可以幫助你制作出許多有趣的效果，同時也是提升用戶體驗的好方法。