CSS是一種用于網頁布局和樣式的語言,最近我嘗試著使用CSS去仿照Sony動態壁紙的效果。
body { background-color: #000000; height: 100vh; background-image: url('sony.gif'); background-position: center; background-repeat: no-repeat; background-size: cover; animation: spin 10s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
我們可以看到以上代碼可以實現以下效果:
背景顏色為黑色,占滿屏幕。使用Sony的動態壁紙作為整個頁面的背景圖,居中且不重復,背景大小隨瀏覽器窗口大小自適應,同時還有旋轉的動效,每10秒旋轉360度。
CSS能夠實現的布局和樣式效果非常多,有興趣的同學可以嘗試著去寫出更多的效果和動畫。