生日蠟燭是生日聚會上必不可少的元素,而使用CSS來實現生日蠟燭的效果,可以讓網頁更加生動有趣。下面是一段CSS代碼演示如何通過CSS來實現生日蠟燭效果。
/* 生日蠟燭CSS源碼 */ .candle { position: relative; height: 100px; width: 50px; margin: 0 auto; } .candle:before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 50px; width: 10px; background-color: gray; border-radius: 5px 5px 0 0; } .candle:after { content: ''; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); height: 50px; width: 40px; background-color: yellow; border-radius: 20px; } .candle .flame { background: radial-gradient(circle at 10px 0, #FFF, #F90); width: 50px; height: 100px; border-radius: 50% 50% 0 0; position: relative; transform-origin: bottom center; animation: flame 2s ease-out infinite; } @keyframes flame { 0%{ transform: scaleY(1) rotateZ(1deg); } 50%{ transform: scaleY(1.05) rotateZ(-1deg); } 100%{ transform: scaleY(1) rotateZ(1deg); } }
通過這段CSS代碼,可以實現一個灰色的蠟燭身和黃色的火焰,而且火焰還有跳動的動畫效果。可以根據需要進行調整,來實現更加個性化的生日蠟燭效果。
上一篇306瀏覽器 json
下一篇mysql中的報表如何做