div+css实现滚动随机抽奖动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现滚动随机抽奖动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=750,user-scalable=no" /> <style> *{ margin: 0; padding: 0; border: 0; } html, body { width: 100%; height: 100%; } .lottery_wrapper { width: 100%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/images/lottery/lottery_bg.png) no-repeat top center; background-size: cover; } .lottery_wrapper > div.ring_wrapper { width: 652px; height: 652px; background: url(//repo.bfw.wiki/bfwrepo/images/lottery/ring.png) no-repeat top center; background-size: cover; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .lottery_wrapper > div.ring_wrapper > .item-list { position: absolute; left: 30px; top: 58px; width: 600; height: 450px; margin: auto; font-size: 0px; } .lottery_wrapper > div.ring_wrapper > .item-list > .item { background: url(//repo.bfw.wiki/bfwrepo/images/lottery/one.png) no-repeat top center; background-size: cover; height: 160px; width: 600px; box-sizing: border-box; position: absolute; } .lottery_wrapper > div.ring_wrapper > .item-list > .item:nth-child(1) { transform: scale(0.4, 0.4) translateY(60px); animation: move1 3s linear 3; } .lottery_wrapper > div.ring_wrapper > .item-list > .item:nth-child(2) { transform: scale(0.6, 0.6) translateY(140px); animation: move2 3s linear 3; } .lottery_wrapper > div.ring_wrapper > .item-list > .item:nth-child(3) { transform: scale(1, 1) translateY(172px); animation: move3 3s linear 3; } .lottery_wrapper > div.ring_wrapper > .item-list > .item:nth-child(4) { transform: scale(0.6, 0.6) translateY(444px); animation: move4 3s linear 3; } .lottery_wrapper > div.ring_wrapper > .item-list > .item:nth-child(5) { transform: scale(0.4, 0.4) translateY(824px); animation: move5 3s linear 3; } @keyframes move1 { 0% { transform: scale(0.3, 0.3) translateY(60px); z-index: 10; } 20% { transform: scale(0.6, 0.6) translateY(140px); z-index: 100; } 40% { transform: scale(1, 1) translateY(172px); z-index: 100; } 60% { transform: scale(0.6, 0.6) translateY(444px); z-index: 100; } 80% { transform: scale(0.3, 0.3) translateY(784px); z-index: 10; opacity: 1; } 100% { transform: scale(0.3, 0.3) translateY(60px); z-index: 10; opacity: 1; } } @keyframes move2 { 0% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0