摘要:如下是使用一个单页面画的抽奖效果如图所示,代码如下所示抽做了一个抽奖活动的小用于好好理解动画。中间各种百度学习了别人的代码,于是自己写了个小,希望大家支持。自学小前端一枚。。。
如下是使用一个单页面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);
}