原生js实现大转盘抽奖效果代码
代码语言:html
所属分类:大转盘
代码描述:原生js实现大转盘抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .zp { position: relative; border-radius: 100%; width: 300px; overflow: hidden; margin:0 auto; } .zp-panel { background: url(//repo.bfw.wiki/bfwrepo/images/fruts/zp.webp) no-repeat center center; background-size: 100%; width: 300px; height: 300px; position: relative; transition: transform 4s ease-out; } .item { font-size: 12px; position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin-top: -7px; line-height: 1; } .btn { position: absolute; background-color: green; width: 80px; height: 80px; border-radius: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; } .btn:after { content: ''; position: absolute; height: 80px; width: 4px; background-color: green; left: 38px; bottom: 60px; } </style> </head> <div class="zp"> <div class="zp-panel"><div class="item" style="transform:rotate(-90deg) translate(75px)">积分+1</div><div class="item" style="transform:rotate(-30deg) translate(75px)">积分+2</div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0