CSS3.0是一種用于網頁設計的語言,它為我們提供了更多的樣式選擇和效果。想要制作七夕節的背景,我們可以使用CSS3.0來實現。
body { font-family: Arial, sans-serif; background: #fafafa; } .stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: url(stars.png) repeat top center; animation: twinkling 10s linear infinite; } @keyframes twinkling { 0% { opacity: 1; } 25% { opacity: 0.5; } 50% { opacity: 0.3; } 75% { opacity: 0.5; } 100% { opacity: 1; } } .hearts { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10em; line-height: 1; animation: beating 1s linear infinite; } @keyframes beating { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
上面的代碼實現了一個星空的背景和一顆跳動的心形圖案。在html中,我們只需要添加兩個div,分別給它們添加stars和hearts的class就可以啦。
<div class="stars"></div> <div class="hearts"><i class="fas fa-heart"></i></div>
如此簡單的CSS3.0代碼就可以讓我們的頁面變得非常有情調啦。這個七夕,你也可以用CSS3.0來為自己的愛情故事加點浪漫色彩。