新年將至,我們分享一組關于恭賀新禧對聯效果的CSS代碼,希望能為大家的頁面增添些許喜慶的氣氛。
首先,讓我們來看一下我們的HTML結構:
<div class="couplets"><div class="couplet-left">春節快樂</div><div class="couplet-right">大吉大利</div></div>
這里我們使用了一個div容器,左右兩個對聯分別是兩個子元素。
接下來是CSS代碼實現:
.couplets { font-size: 36px; font-weight: bold; text-align: center; margin-top: 100px; } .couplet-left { display: inline-block; width: 200px; height: 100px; line-height: 100px; background-color: red; color: white; transform: rotate(15deg); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); } .couplet-right { display: inline-block; width: 200px; height: 100px; line-height: 100px; background-color: red; color: white; transform: rotate(-15deg); box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2); }
我們通過設置容器的字體大小、粗細、文本對齊方式和上邊距,來使對聯整體居中、顯眼。對聯左右兩邊的CSS樣式基本一致,只是通過旋轉transform和陰影box-shadow來實現左右錯落的對稱效果。
最終,我們得到了一個簡單的恭賀新禧對聯效果,讓人感到喜氣洋洋:
春節快樂
大吉大利
下一篇mysql中如何分組