js+css实现金额数字抽奖大转盘效果代码
代码语言:html
所属分类:大转盘
代码描述:js+css实现金额数字抽奖大转盘效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Anton+SC&display=swap'>
<style>
html,
body {
height: 100%;
overflow: hidden;
}
body {
background-color: #333;
display: grid;
justify-content: center;
}
.score,
.round {
color: white;
font-family: monospace;
position: fixed;
top: 10px;
}
.score {
left: 10px;
}
.round {
right: 10px;
}
@-webkit-keyframes jolt {
from {
transform: translate(-50%, -16px) rotate(150deg);
}
to {
transform: translate(-50%, -16px) rotate(180deg);
}
}
@keyframes jolt {
from {
transform: translate(-50%, -16px) rotate(150deg);
}
to {
transform: translate(-50%, -16px) rotate(180deg);
}
}
.casing {
margin-top: 100px;
position: relative;
width: 400px;
height: 400px;
border: 2px solid grey;
border-radius: 1000px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.casing .wheel {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 400px;
overflow: hidden;
border-radius: 1000px;
cursor: pointer;
}
.casing .wheel.rotating {
cursor: initial;
}
.casing .wheel .cap {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
border-radius: 1000px;
background-color: black;
border: 2px solid white;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.casing .wheel .center {
position: absolute;
top: 200px;
left: 200px;
}
.casing .wheel .center .segment {
position: absolute;
top: 0;
height: 0;
width: 0;
border-style: solid;
transform-origin: 50% 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.casing .wheel .center .txt {
position: absolute;
top: 0;
left: 0;
height: 200px;
color: white;
transform: translate(-50%, -16px) rotate(180deg);
font-size: 28px;
display: flex;
justify-content: center;
align-items: flex-start;
line-height: 1;
font-family: "Anton SC", sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: 0 0 3px orange;
}
.casing .wheel .center .divider {
position: absolute;
height: 200px;
top: 0;
left: 0;
width: 1px;
background-color: black;
transform-origin: 50% 0;
}
.casing .wheel .center .divider::after {
position: absolute;
content: "";
width: 6px;
height: 6px;
border-radius: 1000px;
background-color: white;
left: 0;
bottom: 2px;
transform: translateX(-1px);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0