摘要:如下是使用一個單頁面畫的抽獎效果如圖所示,代碼如下所示抽做了一個抽獎活動的小用于好好理解動畫。中間各種百度學習了別人的代碼,于是自己寫了個小,希望大家支持。自學小前端一枚。。。
如下是使用一個單頁面html畫的抽獎demo
效果如圖所示,代碼如下所示html { height: 100%; } body { position: relative; height: 100%; } .circle { position: relative; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; background: pink; width: 200px; height: 200px; border-radius: 100px; } #left{ clip: rect(0px 100px 200px 0px); position: absolute; right: 0px; width: 100px; height: 200px; overflow: hidden; } #right{ clip: rect(0px 100px 200px 0px); position: absolute; left: 0px; width: 100px; height: 200px; overflow: hidden; } .circle-left { width: 100px; height: 200px; border-radius: 0px 100px 100px 0px; position: absolute; right: 0; transform-origin: 0 50%; line-height: 59px; text-align: center; } .circle2 { background: blue; } .circle3 { background: yellow; transform: rotate(45deg); } .circle4 { background: lightblue; transform: rotate(90deg); } .circle5 { background: lightcoral; transform: rotate(135deg); } .circle-right{ width: 100px; height: 200px; border-radius: 100px 0px 0px 100px ; position: absolute; right: 0; transform-origin: 100% 50%; line-height: 59px; text-align: center; } .circle6{ background-color: #3b2e7e; transform: rotate(-135deg); } .circle7{ background-color: #ff2121; transform: rotate(-90deg); } .circle8{ background-color: #16a951; transform: rotate(-45deg); } .circle9{ background-color: #e0eee8; } .center1 { background: pink; width: 50px; height: 50px; top: 50%; left: 50%; position: absolute; margin-left: -25px; margin-top: -25px; border-radius: 50px; z-index: 1; text-align: center; line-height: 50px; font-size: 42px; text-align: center; /* animation: rotateF 1s infinite linear ; -webkit-animation: rotateF 1s infinite linear ; */ animation: rotateF 1s steps(10) alternate infinite ; -webkit-animation: rotateF 1s steps(10) alternate infinite ; animation-play-state: paused; /* background-image: url(arrow.png); background-size: 100% 100%; */ } .arrow { background-image: url(arrow.png); background-size: 100% 100%; display: none; } @keyframes rotateF{ from {transform: rotate(0deg)} to {transform: rotate(360deg)} }
抽12345678
function chou() { let center = document.getElementById("center"); let arrow = document.getElementById("arrow"); center.style.display = "none"; arrow.style.display = "block"; arrow.style.WebkitAnimationPlayState = "running"; arrow.style.AnimationPlayState = "running"; let time = Math.random()*10000 setTimeout(()=>{ arrow.style.WebkitAnimationPlayState = "paused" arrow.style.AnimationPlayState = "paused" },time); } function grade() { let arrow = document.getElementById("arrow"); let time = Math.random()*10000 arrow.style.WebkitAnimationPlayState = "running"; arrow.style.AnimationPlayState = "running"; setTimeout(()=>{ arrow.style.WebkitAnimationPlayState = "paused" arrow.style.AnimationPlayState = "paused" },time); }