在中秋佳節來臨之際,為了給網站增添節日氣氛,我們可以添加一些中秋主題的CSS特效。下面介紹幾種簡單易學的中秋特效。
1. 月餅動畫特效
.mooncake { width: 100px; height: 100px; border-radius: 50%; background-color: #f6a623; background-image: radial-gradient(circle at 20%, #ede5c0 0%, #f5d56e 15%, #f6a623 99%); position: relative; transform: rotate(45deg); animation: rotate 5s linear infinite; } .mooncake:before { content: ""; width: 40%; height: 40%; background-color: #f6a623; border-radius: 50%; position: absolute; top: 30%; left: 30%; } .mooncake:after { content: ""; width: 60%; height: 60%; background-color: #ffffff; border-radius: 50%; position: absolute; top: 20%; left: 20%; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
2. 煙花爆炸特效
.firework { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background-color: #f6a623; animation: explode 2s ease-out; } .firework:before, .firework:after { content: ""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: inherit; background-color: inherit; } .firework:before { transform: rotate(45deg); } .firework:after { transform: rotate(-45deg); } @keyframes explode { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(5); opacity: 0; } }
3. 燈籠動畫特效
.lantern { position: relative; width: 100px; height: 200px; } .lantern:before, .lantern:after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; } .lantern:before { border-width: 0 10px 80px 10px; border-color: transparent transparent #f6a623 transparent; } .lantern:after { border-width: 80px 10px 0 10px; border-color: #f6a623 transparent transparent transparent; } .lantern span { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: #f6a623; animation: lantern-blink 1s infinite alternate; } @keyframes lantern-blink { 0% { opacity: 0.6; } 100% { opacity: 1; } }
以上是三種簡單的中秋主題CSS特效,可以通過修改代碼自定義不同的效果,讓網站增添中秋節日氣氛。