js方块日历效果
代码语言:html
所属分类:布局界面
代码描述:js方块日历效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
position: relative;
}
body {
margin: 0;
background-color: whitesmoke;
}
.stage {
height: 100vh;
-webkit-perspective: 1000px;
perspective: 1000px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
@media (max-width: 480px) {
.stage {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
time {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 110px);
transform: translate(-50%, 110px);
color: #666;
font-size: 0.8em;
}
.group {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 1000ms;
transition: 1000ms;
}
.group.g1 {
left: 110px;
z-index: 1;
}
.group.g2 {
left: -110px;
z-index: 2;
}
.group .d1, .group .d3 {
left: -55px;
}
.group .d2, .group .d4 {
left: 55px;
}
.dice {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
text-align: center;
font-size: 45px;
line-height: 2;
-webkit-transition: 1000ms;
transition: 1000ms;
}
.dice .face {
position: absolute;
margin: -45px;
width: 90px;
height: 90px;
outline: 1px solid transparent;
opacity: 0.9;
}
.dice .face:nth-child(1) {
-webkit-transform: rotateY(0deg) translateZ(45px);
transform: rotateY(0deg) translateZ(45px);
}
.dice .face:nth-child(2) {
-webkit-transform: rotateY(90deg) translateZ(45px);
transform: rotateY(90deg) translateZ(45px);
}
.dice .face:nth-child(3) {
-webkit-transform: rotateY(180deg) translateZ(45px);
transform: rotateY(180deg) translateZ(45px);
}
.dice .face:nth-child(4) {
-webkit-transform: rotateY(270deg) translateZ(45px);
transform: rotateY(270deg) translateZ(45px);
}
.dice .face:nth-child(5) {
-webkit-transform: rotateX(90deg) translateZ(45px);
transform: rotateX(90d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0