CSS
语言:
CSSSCSS
确定
html,
body {
background-color: #212121;
}
html *,
body * {
box-sizing: border-box;
}
.canvas {
position: relative;
background: #212121;
width: 300px;
height: 300px;
margin: 10px;
padding: 50px 0;
}
.box {
overflow: hidden;
}
.box--outer {
padding: 5px;
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
.box--inner {
width: 195px;
height: 195px;
background: #212121;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.95);
transform: translateX(-50%) translateY(-50%) scale(0.95);
position: absolute;
z-index: 1;
text-align: center;
line-height: 195px;
-webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
color: #25c1bb;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.box-rotate {
position: absolute;
width: 400px;
height: 400px;
top: -100px;
left: -100px;
-webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.box-rotate .quart {
width: 200px;
height: 200px;
position: absolute;
}
.box-rotate .quart--red {
top: 0;
left: 0;
background: #00bcd4;
}
.box-rotate .quart--green {
top: 0;
left: 200px;
background: #cddc39;
}
.box-rotate .quart--blue {
top: 200px;
left: 200px;
background: #923e9a;
}
.box-rotate .quart--yellow {
top: 200px;
left: 0;
background: #ffc107;
}
.box--outer:hover {
cursor: pointer;
}
.box--outer:hover .box--inner {
width: 195px;
height: 195px;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
background: #313131;
}
.box--outer:hover .box-rotate {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}