CSS3印章效果是一種非常酷的視覺效果,可以為網頁增添獨特的風格。通過使用CSS3的特殊效果屬性,如border-radius、box-shadow等,我們可以輕松創建出具有深度和立體感的印章效果。
.seal { width: 150px; height: 150px; background-color: #8A0707; border-radius: 50%; position: relative; text-align: center; line-height: 150px; color: white; font-size: 48px; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); box-shadow: 0 4px 8px rgba(0,0,0,0.5); } .seal:before, .seal:after { content: ''; position: absolute; z-index: -1; top: 50%; left: -10px; right: -10px; bottom: -10px; background-color: #8A0707; } .seal:before { transform: rotate(45deg); } .seal:after { transform: rotate(-45deg); }
上面的CSS代碼是一個基本的印章效果的樣式。通過設置寬高相等的元素,并將其圓角設置為50%,我們可以創建出一個圓形的印章。然后使用box-shadow屬性為此元素添加陰影效果,增強其深度和立體感。
接下來,為了使印章看起來更加真實,我們使用:before和:after偽元素來模擬印章上的兩個金屬環。在這兩個偽元素上,我們設置了相同的背景色和旋轉角度,讓它們看起來像是印章上的兩個立體金屬環,從而使印章效果更加逼真。
通過這種簡單的CSS3效果,我們可以輕松實現出印章效果,讓網頁更加生動、鮮明。
上一篇css3參照點