gsap实现一个卡通扭蛋机抽奖效果代码
代码语言：html
所属分类：其他
代码描述：gsap实现一个卡通扭蛋机抽奖效果代码，可以拆看看看自己中了什么奖品。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap");
#app.gotcha .container .ui-layer .title-container .title h2, #app.gotcha .container .game-layer .machine-container .title {
text-shadow: 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white), 0px 0px 2px var(--stroke-color, white);
filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.2));
}
*, *::before, *::after {
box-sizing: border-box;
font-family: inherit;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
height: 100%;
color: white;
font-family: "M PLUS Rounded 1c", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
html body {
font-size: 1.6rem;
overflow: hidden;
height: 100%;
position: relative;
user-select: none;
}
.dim {
transition: 0.5s linear;
}
.dim[data-animate] {
filter: brightness(0.6) saturate(0.8);
}
.confetti {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
perspective: 100vmin;
}
.confetti span {
--size: 5;
display: block;
position: absolute;
width: calc(var(--size) * 1px);
height: calc(var(--size) * 1px);
background-color: blue;
animation: rotate linear calc(var(--rs) * 1s) infinite both;
}
#app.gotcha {
width: 100%;
height: 100%;
position: relative;
background-color: #666;
}
#app.gotcha .container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#app.gotcha .container .game-layer {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: url(//repo.bfw.wiki/bfwrepo/images/niudaoji/bg.jpg) center/auto 100% no-repeat;
}
#app.gotcha .container .game-layer .machine-container {
position: relative;
white-space: nowrap;
}
#app.gotcha .container .game-layer .machine-container .machine {
position: relative;
z-index: 1;
max-height: 80vh;
pointer-events: none;
}
#app.gotcha .container .game-layer .machine-container .backboard {
z-index: 0;
width: 15vh;
height: 13vh;
top: 65%;
left: 48%;
background-color: #e288bb;
position: absolute;
}
#app.gotcha .container .game-layer .machine-container .title {
--stroke-color: #ad8bd6;
position: absolute;
display: block;
top: 10%;
width: 100%;
text-align: center;
font-size: 5vh;
z-index: 3;
}
#app.gotcha .container .game-layer .machine-container .title span {
animation: blink 0.8s linear both infinite;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(1) {
animation-delay: 0.12s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(2) {
animation-delay: 0.24s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(3) {
animation-delay: 0.36s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(4) {
animation-delay: 0.48s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(5) {
animation-delay: 0.6s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(6) {
animation-delay: 0.72s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(7) {
animation-delay: 0.84s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(8) {
animation-delay: 0.96s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(9) {
animation-delay: 1.08s;
}
#app.gotcha .container .game-layer .machine-container .title span:nth-child(10) {
animation-delay: 1.2s;
}
#app.gotcha .container .game-layer .machine-container .price {
z-index: 3;
position: absolute;
color: #fb91c9;
font-size: 2.5vh;
top: 80%;
left: 15%;
}
#app.gotcha .container .game-layer .machine-container .handle {
z-index: 3;
position: absolute;
height: 3.9vh;
left: 13%;
top: 69%;
}
#app.gotcha .container .game-layer .machine-container .balls {
position: absolute;
top: 22%;
left: 2%;
width: 96%;
height: 34.5%;
}
#app.gotcha .container .game-layer .machine-container .pointer {
position: absolute;
height: 15vh;
top: 75%;
left: 15%;
z-index: 5;
}
#app.gotcha .container .game-layer .machine-container .pointer img {
height: 100%;
display: block;
transform: rotate(-30deg);
transform-origin: 0% 0%;
animation: click 1s ease-in-out infinite both;
}
#app.gotcha .container .ui-layer {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
}
#app.gotcha .container .ui-layer .title-container {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
#app.gotcha .container .ui-layer .title-container .title h2 {
--stroke-color: #f06e5b;
text-align: center;
font-size: 5vh;
}
#app.gotcha .container .ui-layer .prize-container {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#app.gotcha .container .ui-layer .prize-container .prize-ball-container {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#app.gotcha .container .ui-layer .prize-container .prize-reward-container {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#app.gotcha .container .ui-layer .prize-container .prize-reward-container > * {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
#app.gotcha .container .ui-layer .prize-container .prize-reward-container .prize img {
height: 50vh;
}
#app.gotcha .container .ui-layer .prize-container .prize-reward-container .shine img {
height: 100vh;
animation: spin linear 5s infinite forwards;
}
#app.gotcha .container .ball {
--size: 8vh;
--outline: #4c3fc2;
--color1: #2facff;
--color2: #ff8ff6;
width: var(--size);
height: var(--size);
border-radius: 100%;
background-color: var(--color1);
border: solid 0.8vh var(--outline);
position: absolute;
overflow: hidden;
}
#app.gotcha .container .ball::after {
content: "";
display: block;
position: absolute;
top: 50%;
height: 200%;
width: 200%;
background-color: var(--color2);
border-radius: 100%;
border: inherit;
transform: translate(-25%, -5%);
}
#app.gotcha .wiggle {
animation: wiggle 2s ease-in-out infinite both;
}
@keyframes blink {
0% {
color: #ffc7e5;
}
20% {
color: #fcff33;
}
100% {
color: #ffc7e5;
}
}
@keyframes wiggle {
0% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
100% {
transform: rotate(-5deg);
}
}
@keyframes click {
0% {
transform: rotate(-30deg) translateY(0vh);
}
80% {
transform: rotate(-30deg) translateY(5vh);
}
100% {
transform: rotate(-30deg) translateY(0vh);
}
}
@keyframes spin {
to {
transform: rotate(0turn);
}
from {
transform: rotate(1turn);
}
}
@keyframes rotate {
from {
transform: rotate3d(var(--rx), var(--ry), var(--rz), 0turn);
}
to {
transform: rotate3d(var(--rx), var(--ry), var(--rz), 1turn);
}
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="game-layer">
<div class="machine-container">
<div class="backboard"></div>
<div class="balls"></div>
<img class="machine" src="//repo.bfw.wiki/bfwrepo/images/niudaoji/gotcha.svg" />
<div class="title"></div>
<div class="price"></div>
<img class="handle" src="//repo.bfw.wiki/bfwrepo/images/niudaoji/handle.svg" />
<div class="pointer">
<img src="//repo.bfw.wiki/bfwrepo/images/niudaoji/point.png" />
</div>
</div>
</div>
<div class="ui-layer">
<div class="title-container">
<div class="title">
<h2 class="wiggle">点击抽奖</h2>
</div>
</div>
<div class="prize-container">
<div class="prize-ball-container"></div>
<div class="prize-reward-container">
<div class="shine">
<img src="//repo.bfw.wiki/bfwrepo/images/niudaoji/shine.png" />
</div>
<div class="prize">
<img class="wiggle" src="" />
&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0