CSS3是一種強大的Web設計語言,它可以幫助我們實現各種各樣的效果。其中,制作氣泡就是CSS3的一種獨特技巧。
.pop { position: relative; display: inline-block; } .pop::before { content: ""; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-bottom: 5px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #fff transparent; } .pop::after { content: ""; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-bottom: 7px; margin-left: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent #e65454 transparent; } .pop:hover::before, .pop:hover::after { visibility: visible; opacity: 1; }
這段代碼可以創建一個簡單的氣泡效果。我們首先在HTML中創建一個用來包裹內容的容器,使用position:relative屬性讓它的子元素絕對定位。然后使用::before和::after偽元素分別創建了氣泡的底部和頂部部分,使用不同顏色來區分不同部分。
當鼠標懸停在容器上時,我們使用:hover偽類來讓氣泡出現。我們改變了偽元素的visibility和opacity屬性,使其實現出現的效果。
氣泡效果既簡單又實用,是Web設計中經常使用的一種技巧。通過巧妙的使用CSS3,我們可以輕松地為網站添加各種特效,吸引用戶的注意力,提升網站的價值。
下一篇2.0 json