js实现三维动态旋转的checkbox组合验证码效果代码

代码语言:html

所属分类:验证

代码描述:js实现三维动态旋转的checkbox组合验证码效果代码,把底部的checkbox勾选跟上面一样才能通过验证。

代码标签: js 三维 动态 旋转 checkbox 组合 验证码

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

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

<head>
 
<meta charset="UTF-8">
 

 
 
 
 
<style>
html
,
body
{
       
margin: 0;
       
padding: 0;
       
width: 100vw;
       
height: 100vh;
       
overflow: hidden;
       
display: flex;
       
justify-content: center;
       
align-items: center;
       
flex-direction: column;
       
perspective: 100vw;
}
.Area {
       
display: flex;
       
justify-content: center;
       
align-items: center;
       
height: 40vh;
       
animation: Rotate3D 20s infinite linear;
       
transform-style: preserve-3d;
}
.Slice {
       
display: flex;
       
position: absolute;
       
transform-style: preserve-3d;
}
@keyframes Rotate3D {
       
100% {
               
transform: rotateY(360deg);
       
}
}
input
{
       
width: min(6vw, 6vh);
       
height: min(6vw, 6vh);
}
</style>


 
 
</head>

<body translate="no">
 
<div class="Area"></div>
<div class="Area"></div>
 
     
<script >
function Initial() {
        var AreaList = docume.........完整代码请登录后点击上方下载按钮下载查看

网友评论0