0
点赞
收藏
分享

微信扫一扫

红队-安全见闻篇(上)

影子喵喵喵 2024-11-04 阅读 8
htmlcss3d

效果演示

HTML和CSS实现一个简单的3D立方体加载动画的相册。它使用了HTML来构建立方体的结构,并通过CSS来添加样式和动画效果。
在这里插入图片描述

HTML

<div class="loader3d">
    <div class="cube">
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
    </div>
</div>
  • loader3d:这是外层容器,用于包裹整个立方体。
  • cube:这是立方体的主体,包含六个面(.face)。
  • face:每个.face代表立方体的一个面。这里一共有六个面,用自己的图片即可。

CSS

.loader3d {
    perspective: 600px;
    width: 100px;
    height: 100px;
}

.cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate 4s linear infinite;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #3498db, #e74c3c);
    opacity: 0.8;
    border: 0.5px solid #fff;
    border-radius: 25%;
    text-align: center;
    line-height: 100px;
}

.face img {
    width: 100%;
    height: 100%;
    border: 0.5px solid #fff;
    border-radius: 25%;
}

.face:nth-child(1) {
    transform: rotateX(90deg) translateZ(50px);
}

.face:nth-child(2) {
    transform: rotateX(-90deg) translateZ(50px);
}

.face:nth-child(3) {
    transform: translateZ(50px);
}

.face:nth-child(4) {
    transform: rotateY(90deg) translateZ(50px);
}

.face:nth-child(5) {
    transform: rotateY(-90deg) translateZ(50px);
}

.face:nth-child(6) {
    transform: rotateY(180deg) translateZ(50px);
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
  • loader3d:这是外层容器的样式,设置了透视效果(perspective),宽度和高度。
  • cube:这是立方体的样式,设置了宽度、高度、3D变换样式(transform-style),以及一个无限循环的旋转动画(rotate)。
  • face:这是立方体每个面的通用样式,设置了位置、大小、背景渐变色、透明度、边框、边框圆角和文本对齐方式。
  • face img:这是每个面上图片的样式,设置了图片的宽度、高度、边框和圆角。
  • face的nth-child()选择器:这是为每个面设置不同的3D旋转和位置。例如,.face:nth-child(1)将第一个面旋转90度并沿Z轴移动50px。
  • @keyframes rotate:这是一个关键帧动画,定义了立方体的旋转效果。从0%到100%,立方体的X轴和Y轴旋转角度从0度增加到360度。
  • 立方体会无限循环地沿着X轴和Y轴旋转,这是通过@keyframes rotate定义的动画实现的。
  • 每个面都有自己的旋转和位置,使得立方体看起来在空间中旋转。
举报

相关推荐

0 条评论