前端開發(fā)中，CSS 是一個(gè)非常重要的技術(shù)。它可以用來(lái)改變頁(yè)面的樣式，讓網(wǎng)站具有更好的視覺(jué)效果和用戶體驗(yàn)。在這篇文章中，我們將介紹一些前端純 CSS 效果的例子。

/* 輪播圖效果 */
.carousel {
position: relative;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
/* 過(guò)渡效果 */
transition: opacity 1s ease;
}
.carousel img.active {
opacity: 1;
}
/* 懸浮框效果 */
.box {
position: relative;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
}
.box::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top-color: #fff;
}
/* 折疊菜單效果 */
.menu {
position: relative;
width: 200px;
}
.menu .item {
padding: 10px;
margin-bottom: 1px;
background-color: #fff;
cursor: pointer;
user-select: none;
}
.menu .item:hover {
background-color: #eee;
}
.menu .sub-menu {
position: absolute;
left: 100%;
top: 0;
width: 200px;
display: none;
}
.menu .item:hover .sub-menu {
display: block;
}

輪播圖、懸浮框和折疊菜單是常見(jiàn)的前端 UI 控件，在這些示例中，我們使用純 CSS 實(shí)現(xiàn)了它們。其中，輪播圖通過(guò)對(duì)圖片的透明度過(guò)渡實(shí)現(xiàn)了淡入淡出的效果；懸浮框則是利用偽元素在內(nèi)容上方增加一個(gè)三角形；而折疊菜單則是在鼠標(biāo)懸停時(shí)顯示子菜單。

總的來(lái)說(shuō)，在 CSS 開發(fā)中使用這些技巧能夠使頁(yè)面效果更為生動(dòng)，同時(shí)也需要注意性能和兼容性。希望本文對(duì)大家在前端開發(fā)中有所幫助。