CSS 经典实例
三维立方体
<div class="bruce flex-ct-x" data-title="三维立方体">
<div class="td-cube">
<ul>
<li class="front">1</li>
<li class="back">2</li>
<li class="top">3</li>
<li class="bottom">4</li>
<li class="left">5</li>
<li class="right">6</li>
</ul>
</div>
</div>
$width: 150px;
$height: 150px;
$length: 150px;
.td-cube {
width: $width;
height: $height;
perspective: 1000px;
ul {
position: relative;
width: 100%;
height: 100%;
transform: rotateX(-15deg) rotateY(15deg);
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
li {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: $width;
height: $height;
color: #fff;
font-size: 50px;
opacity: 0.8;
&.front {
background-color: #f66;
transform: translateZ($length / 2);
}
&.back {
background-color: #66f;
transform: rotateY(180deg) translateZ($length / 2);
}
&.top {
background-color: #f90;
transform: rotateX(90deg) translateZ($height / 2);
}
&.bottom {
background-color: #09f;
transform: rotateX(-90deg) translateZ($height / 2);
}
&.left {
background-color: #9c3;
transform: rotateY(-90deg) translateZ($width / 2);
}
&.right {
background-color: #3c9;
transform: rotateY(90deg) translateZ($width / 2);
}
}
}
@keyframes rotate {
from {
transform: rotateY(0) rotateX(0);
}
to {
transform: rotateY(-1turn) rotateX(-1turn);
}
}
使用:hover 控制悬浮边框
<div class="bruce flex-ct-x" data-title="使用:hover控制悬浮边框">
<div class="dynamic-border">iCSS</div>
</div>
.dynamic-border {
width: 200px;
height: 80px;
color: #f66;
font-weight: bold;
font-size: 50px;
line-height: 80px;
text-align: center;
background: linear-gradient(0, #f66 2px, #f66 2px) no-repeat left top/0 2px, linear-gradient(
-90deg,
#f66 2px,
#f66 2px
) no-repeat right top/2px 0,
linear-gradient(-180deg, #f66 2px, #f66 2px) no-repeat right bottom/0 2px, linear-gradient(
-270deg,
#f66 2px,
#f66 2px
) no-repeat left bottom/2px 0;
cursor: pointer;
transition: all 300ms;
&:hover {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
}