使用CSS制作大屏展示大樹可以為我們的網站增加足夠的視覺沖擊力,同時也能展現出我們的設計能力和技術水平。下面,我將詳細介紹如何使用CSS完成這項任務。
/* 首先,我們創建一個包含大樹坐標的div */ .tree { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background-color: brown; border-radius: 50%; } /* 創建大樹主干的CSS代碼 */ .tree::before { content: ""; position: absolute; top: -10px; left: 50%; height: 100px; width: 4px; background-color: brown; transform: translateX(-50%); } /* 創建大樹枝干的CSS代碼 */ .tree::after { content: ""; position: absolute; top: -10px; left: 50%; height: 80px; width: 4px; background-color: brown; transform: translateX(-50%) rotate(-45deg); } /* 創建大樹葉子的樣式 */ .leaf { position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-45deg); height: 20px; width: 20px; background-color: green; border-radius: 50%; } /* 給大樹添加葉子 */ .tree .leaf:nth-child(1) { transform: translateX(-50%) rotate(0deg); } .tree .leaf:nth-child(2) { transform: translateX(-50%) rotate(30deg); } .tree .leaf:nth-child(3) { transform: translateX(-50%) rotate(60deg); } .tree .leaf:nth-child(4) { transform: translateX(-50%) rotate(90deg); } .tree .leaf:nth-child(5) { transform: translateX(-50%) rotate(120deg); } .tree .leaf:nth-child(6) { transform: translateX(-50%) rotate(150deg); } .tree .leaf:nth-child(7) { transform: translateX(-50%) rotate(180deg); } .tree .leaf:nth-child(8) { transform: translateX(-50%) rotate(210deg); } .tree .leaf:nth-child(9) { transform: translateX(-50%) rotate(240deg); } .tree .leaf:nth-child(10) { transform: translateX(-50%) rotate(270deg); } .tree .leaf:nth-child(11) { transform: translateX(-50%) rotate(300deg); } .tree .leaf:nth-child(12) { transform: translateX(-50%) rotate(330deg); }
通過以上代碼,我們就能夠輕松地在網站上實現一個美麗的大樹。我們可以適當調整以上樣式的值,達到自己滿意的效果。
上一篇css字體顏色調漸變