CSS3中的許多功能可以幫助我們實現一些可愛的效果,比如漂亮的天空和閃閃發光的星星。
首先,我們需要為整個頁面設置一個背景顏色或者背景圖片,來營造我們想要的天空效果。接下來,我們可以使用CSS3中的radial-gradient函數來為元素添加一個徑向漸變,模擬出云朵和天空的效果。
.sky { background: radial-gradient(circle, #fff 0%, #0052cc 100%); }
我們可以使用CSS3中的動畫和偽元素來實現閃爍的星星效果。
.star { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px #fff; animation: twinkling 5s infinite; } .star:before { content: ""; position: absolute; top: -20px; left: -20px; width: 60px; height: 60px; border-radius: 50%; background: transparent; box-shadow: 0 0 20px 10px #fff; opacity: 0; animation: twinkling 5s infinite; } @keyframes twinkling { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} }
我們可以在頁面上放置多個星星,來營造出一個夢幻的星空。通過調整動畫的時間和速度,可以實現不同的效果。