gsap实现点击摇骰子掷骰子获得随机点数动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap实现点击摇骰子掷骰子获得随机点数动画效果代码

代码标签: gsap 点击 摇骰子 掷骰子 获得 随机 点数 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">
 

 
<meta name="viewport" content="width=device-width, initial-scale=1">

 
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

html
, body {
 
width: 100%;
 
height: 100%;
 
overflow:hidden;
 
font-family: 'Roboto', sans-serif;
 
color:#fff;
}

.tray {
 
height:100%;
 
width:100%;
 
background:#000;
 
display:flex;
 
justify-content:center;
 
align-items:center;  
}

.sum {
 
font-size:100px;
 
width:100px;
 
text-align:center;
 
padding-top:9px;
}

@media
(orientation: portrait) {
 
.tray {
   
flex-direction:column;
 
}
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
 
.tray {
   
transform:scale(50%);
   
transform-origin: top left;
   
width:200%;
   
height:200%;
 
}
}
</style>




</head>

<body translate="no" >
 
<div class="tray">
 
<div class="die">
   
<div class="cube">
     
<div class="face"></div>
     
<div class="face"><.........完整代码请登录后点击上方下载按钮下载查看

网友评论0