hexaflip实现组合密码器效果代码
代码语言:html
所属分类:其他
代码描述:hexaflip实现组合密码器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/hexaflip.css">
<style>
#choose-time {
margin: 80px auto;
width: 300px;
text-align: center;
}
#set-button,
#submit {
background-color: #888;
color: #fff;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 2px 6px;
padding-bottom: 4px;
cursor: pointer;
margin-left: 5px;
opacity: 0.95;
filter: alpha(opacity=95);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
font-size: 20px;
}
#set-button:hover,
#submit:hover {
opacity: 1;
-ms-filter: none;
filter: none;
}
.demo {
margin: 0 auto;
-webkit-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
-moz-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
}
#hexaflip-demo1,
#hexaflip-demo2 {
margin-bottom: 4rem;
}
#hexaflip-demo1 .hexaflip-cube,
#hexaflip-demo2 .hexaflip-cube {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
#hexaflip-demo1 .hexaflip-cube .hexaflip-left,
#hexaflip-demo2 .hexaflip-cube .hexaflip-left,
#hexaflip-demo1 .hexaflip-cube .hexaflip-right,
#hexaflip-demo2 .hexaflip-cube .hexaflip-right {
background-color: #222 !important;
}
#hexaflip-demo1 .hexaflip-cube > div,
#hexaflip-demo2 .hexaflip-cube > div {
font-weight: 100;
text-shadow: none;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(1n+1),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(1n+1) {
background-color: #069ad5;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(2n+2),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(2n+2) {
background-color: #fc5215;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(3n+3),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(3n+3) {
background-color: #30b71d;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(4n+4),
#hexaflip-de.........完整代码请登录后点击上方下载按钮下载查看
网友评论0