CSS實現九宮格抽獎的方法很簡單,只需要用到CSS3的布局屬性和動畫屬性即可。
#container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); justify-items: center; align-items: center; } .item { background-color: #eee; font-size: 24px; text-align: center; line-height: 100px; animation: rotate 3s ease-in-out forwards; } @keyframes rotate { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(1080deg) translateX(-50%) translateY(-50%); } }
上面的代碼中,我們將九宮格容器設置為網格布局,每行三個,每個寬度為1fr,高度為100px,并使用居中對齊。每個格子的樣式為背景顏色#eee,字體大小24px,居中對齊,行高為100px,同時使用動畫讓九宮格旋轉1080度,并最終停留在中間格子,實現了九宮格抽獎的效果。