【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享

这是一个使用纯CSS创建的宝藏页面，展示了一些创造性的设计和动画效果。

以下是实现该页面的核心CSS代码：




/* 基本样式 */
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2e2e2e;
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    text-align: center;
}
 
.treasure-box {
    perspective: 1000px;
}
 
.treasure-box .box {
    width: 200px;
    height: 200px;
    background: #333;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
}
 
.treasure-box .box .side {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #333;
    opacity: 0.5;
    backface-visibility: hidden;
}
 
.treasure-box .box .front {
    transform: translateZ(100px);
}
 
.treasure-box .box .back {
    transform: rotateY(180deg) translateZ(100px);
}
 
.treasure-box .box .left {
    transform-origin: left;
    transform: rotateY(-90deg) translateZ(100px);
}
 
.treasure-box .box .right {
    transform-origin: right;
    transform: rotateY(90deg) translateZ(100px);
}
 
.treasure-box .box .top {
    transform-origin: bottom;
    transform: rotateX(90deg) translateZ(100px);
}
 
.treasure-box .box .bottom {
    transform-origin: top;
    transform: rotateX(-90deg) translateZ(100px);
}
 
/* 动画 */
@keyframes rotate {
    0% {
        transform: rotateX(0) rotateY(0);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

这段CSS通过创建一个3D盒子并将其每一面设置为半透明，通过动态旋转盒子，实现了一种立体旋转的宝藏效果。

要使用这段代码，你需要将它放入HTML文件的<style>标签中，并将以下HTML结构放入<body>标签中：




<div class="treasure-box">
    <div class="box">
        <div class="side front">前面</div>
        <div class="side back">背面</div>
        <div class="side left">左面</div>
        <div class="side right">右面</div>
        <div class="side top">上面</div>
        <div class="side bottom">下面</div>
    </div>
</div>

这样就可以在浏览器中看到一个动态旋转的宝藏盒子。

【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享

评论已关闭

推荐阅读