眾所周知，彈出框是現代網頁設計中常用的一種交互方式，然而，傳統的彈出框樣式已經過時，需要一些新的CSS樣式來增加網頁的美觀度和交互性。
最近，新增了一些彈出框的CSS樣式，其中比較常用的為“hover彈出框”和“點擊彈出框”。
hover彈出框，就是當鼠標在元素上懸停時，會彈出一個框來展示更多信息。代碼如下：
.hover-box{
position: relative;
display: inline-block;
}
.hover-box:hover .popup{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.popup{
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}而點擊彈出框，則是當用戶點擊元素時，會彈出一個框來展示更多信息。代碼如下：
.click-box{
position: relative;
display: inline-block;
}
.click-box .popup{
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.click-box.active .popup{
opacity: 1;
visibility: visible;
transform: translateY(0);
}以上兩種CSS樣式，都可以通過簡單的代碼實現。使用它們可以增加網頁的交互性和美觀度，讓用戶更加愉悅的使用我們的網站！