CSS大轉盤抽獎箭頭旋轉是一種經典的網頁特效,讓用戶在參與抽獎時可以愉悅的體驗到轉盤轉動的感覺。現在我將展示如何使用CSS實現這種特效。
.turntable{ position: relative; width: 200px; height: 200px; margin: 0 auto; overflow: hidden; transform-origin: 50% 50%; } .arrow{ position: absolute; top: 5px; left: 50%; transform: translate(-50%,0); width: 0; height: 0; border-style: solid; border-width: 40px 20px 0; border-color: #f00 transparent transparent; } .arrow-turn{ animation: arrow_anim 3s ease-out; transform-origin: 50% 0%; } @keyframes arrow_anim{ 0%{transform:rotate(0);} 25%{transform:rotate(40deg);} 50%{transform:rotate(80deg);} 75%{transform:rotate(120deg);} 100%{transform:rotate(160deg);} }
在上述代碼中,我們首先創建了一個類名為turntable的div容器,并對其進行相應的樣式設置。接著,我們創建了一個類名為arrow的箭頭,并設置它的相應樣式特征。最后,在使用keyframs關鍵字來設定轉盤旋轉的動畫效果時,我們引用了一個名為“arrow_anim”的動畫,并設置了相應的屬性值,使箭頭可以按照我們預期的方式旋轉。
通過上述代碼,我們即可實現CSS大轉盤抽獎箭頭旋轉的經典網頁特效。
上一篇css太大加載不出來