CSS實現照片樹是一種常見的網頁設計技巧,它可以讓網頁更加生動有趣。以下是一些實現照片樹的CSS代碼示例:
ul.photo-tree { list-style-type: none; margin: 0; padding: 0; } ul.photo-tree li { margin: 0 10px; display: inline-block; position: relative; } ul.photo-tree li:before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #ccc; position: absolute; top: -7.5px; left: 50%; margin-left: -2.5px; } ul.photo-tree li:first-child:before { display: none; } ul.photo-tree li:after { content: ''; width: 10px; height: 2px; background-color: #ccc; position: absolute; top: -5px; left: 50%; margin-left: -5px; } ul.photo-tree li:last-child:after { display: none; } ul.photo-tree li img { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 5px #ccc; }
以上CSS代碼可以實現一個簡單的照片樹效果,每張照片之間都有連接線連接。如果需要更復雜的效果,可以根據需求適當調整CSS樣式。
下一篇css實現漢字消失再現