CSS是一種用于網(wǎng)頁布局和美化的語言,它可以幫助我們實現(xiàn)各種各樣的效果,比如做一個圣誕樹。
/* 圣誕樹的樣式 */ .tree { position: relative; margin: 0 auto; width: 100px; height: 160px; } /* 圣誕樹的綠色部分 */ .tree:before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid green; transform: translateX(-50%); } /* 圣誕樹的黃色星星 */ .tree:after { content: ''; position: absolute; top: -20px; left: 50%; width: 20px; height: 20px; background: yellow; border-radius: 50%; transform: translateX(-50%) rotate(-45deg); } /* 圣誕樹的彩色燈 */ .tree span { position: absolute; left: 50%; transform: translateX(-50%); } .tree span:nth-child(1) { top: 20px; width: 10px; height: 10px; background: red; border-radius: 50%; animation: blink 1s ease-in-out infinite; } .tree span:nth-child(2) { top: 40px; width: 10px; height: 10px; background: blue; border-radius: 50%; animation: blink 1s ease-in-out 0.5s infinite; } .tree span:nth-child(3) { top: 60px; width: 10px; height: 10px; background: purple; border-radius: 50%; animation: blink 1s ease-in-out 1s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
通過上面的CSS代碼,我們可以實現(xiàn)一個簡單的圣誕樹效果。首先,我們設置了一個容器(class="tree")來包裹整個圣誕樹。然后,我們使用:before偽元素來實現(xiàn)綠色部分的三角形,使用:after偽元素來實現(xiàn)黃色星星。最后,我們使用span標簽來實現(xiàn)彩色燈效果,并且使用動畫(keyframes)來讓它們閃爍起來。
上一篇vue手機富文本
下一篇html特效源代碼復制