vue实现宫格轮转抽奖 vue实现宫格轮转抽奖

vue实现宫格轮转抽奖(类似穿越火线的xx轮回)，供大家参考，具体内容如下
不做过多的解说，直接上代码啦。关键的代码都写了注释，很容易理解。直接复制即可使用！
另外css部分依赖 node-sass、sass-loader,没有安装的安装一下，已有的小伙伴直接跳过~~

"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",

.center {display: flex; justify-content: center; align-items: center; }.home {padding: 0; margin: 0; width: 100%; height: calc(100vh - 16px); background-image: linear-gradient(25deg, #30007c, #464995, #4d83ad, #41bfc4); @extend .center; &-container {width: 1000px; height: 600px; &-line {width: 100%; height: 198px; display: flex; &-box {flex: 1; overflow: hidden; margin: 5px 3px 5px 3px; @extend .center; background: #fff; transition: all .3s; }&-btn {position: relative; flex: 3; overflow: hidden; margin: 5px 3px 3px 3px; @extend .center; box-shadow: 0 1px 10px 0px #cf5531; background-image: linear-gradient(25deg,#cf5531,#d0853a,#cdaf43,#c4d84d); cursor: pointer; &:active {background-image: linear-gradient(25deg,#3f3e41,#6d6340,#9a8b39,#c9b629); }&::before {position: absolute; content: "点击抽奖"; font-size: 2.5rem; color: #fff; font-weight: bold; }}}}}.selected {background: rgba($color: #f6e58d, $alpha: 0.5); animation-name: twinkle; animation-duration: 3s; animation-iteration-count: infinite; }@keyframes twinkle {0%{background:#ffbe76; } 100% {background:#f6e58d; }}

效果图：