一个三维立体空间的筛子 纯css

于 2022-02-25 16:13:33 发布
阅读量193 收藏 1
点赞数
分类专栏： css 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57446284/article/details/123134773
版权

CSS 动画 flex布局 三维旋转 骰子
关键词由CSDN通过智能技术生成

在复习css的时候，发现自己使用的比较生疏，所以写一个css小项目。练一练手

这个三维立体的筛子主要的功能是，旋转

使用到css中的一些样式，有：flex弹性盒子、animation动画来完成

首先是没有注释版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>一个三维立体旋转的骰子</title>
</head>
<body>
    <div id="wrap">
        <div class="box">
            <div class="one">
                <span></span>
            </div>
            <div class="two">
                <span></span>
                <span></span>
            </div>
            <div class="three">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="four">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="five">
                <span></span>
                <span></span>
                <div><span></span></div>
                <span></span>
                <span></span>
            </div>
            <div class="six">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这是html代码

下面是css代码：

body{
    background: pink;
    margin: 0;
}

#wrap{
    perspective: 1000px;
}

.box{
    width: 200px;
    height: 200px;
    margin: 300px auto;
    position: relative;
    transform-style: preserve-3d;

    transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);

    animation: circle 10s 4.5s linear infinite;
}

.box >div{
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #e7e7e7;
    border-radius: 5px;
    box-shadow: 0 0 10px #bbb;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
}

.box div span{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #d82828;
    box-shadow: inset 0 5px #b60505, inset 0 -5px #fa5d5d;
}

.box >div.one{
    justify-content: center;
    align-items: center;
    transform: rotateY(0deg) translateZ(100px);
    animation: oneFly 4s;
}

@keyframes oneFly {
    0%{
        transform: rotateY(90deg) translateZ(300px);
        opacity: 0;
    }
    12.5%{
        transform: rotateY(0deg) translateZ(300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(0deg) translateZ(300px);
    }
    87.5%{
        transform: rotateY(0deg) translateZ(300px);
    }
    100%{
        transform: rotateY(0deg) translateZ(100px);
    }
}

.two{
    transform: rotateY(-90deg) translateZ(-100px);
    animation: twoFly 4s;
}

@keyframes twoFly {
    0%{
        transform: rotateY(0deg) translateZ(-300px);
        opacity: 0;
    }
    12.5%{
        transform: rotateY(0deg) translateZ(-300px);
        opacity: 0;
    }
    25%{
        transform: rotateY(-90deg) translateZ(-300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(-90deg) translateZ(-300px);
    }
    87.5%{
        transform: rotateY(-90deg) translateZ(-300px);
    }
    100%{
        transform: rotateY(-90deg) translateZ(-100px);
    }
}

.two span:nth-child(2){
    align-self: flex-end;
}

.three{
    transform: rotateY(0deg) translateZ(-100px);
    animation: threeFly 4s;
}

@keyframes threeFly{
    0%{
        transform: rotateY(90deg) translateZ(-300px);
        opacity: 0;
    }
    25%{
        transform: rotateY(90deg) translateZ(-300px);
        opacity: 0;
    }
    37.5%{
        transform: rotateY(0deg) translateZ(-300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(0deg) translateZ(-300px);
    }
    87.5%{
        transform: rotateY(0deg) translateZ(-300px);
    }
    100%{
        transform: rotateY(0deg) translateZ(-100px);
    }
}

.three span:nth-child(2){
    align-self: center;
}

.three span:nth-last-child(1){
    align-self: flex-end;
}

.four{
    flex-wrap: wrap;
    align-content: space-between;
    transform:rotateY(-90deg) translateZ(100px);
    animation: fourFly 4s;
}

@keyframes fourFly{
    0%{
        transform: rotateY(0deg) translateZ(300px);
        opacity: 0;
    }
    37.5%{
        transform: rotateY(0deg) translateZ(300px);
        opacity: 0;
    }
    50%{
        transform: rotateY(-90deg) translateZ(300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(-90deg) translateZ(300px);
    }
    87.5%{
        transform: rotateY(-90deg) translateZ(300px);
    }
    100%{
        transform: rotateY(-90deg) translateZ(100px);
    }
}
.four span:nth-child(3){
    margin-right: 35px;
}

.five{
    flex-wrap: wrap;
    align-content: space-between;
    transform: rotateX(-90deg) translateZ(-100px);

    animation: fiveFly 4s;
}

@keyframes fiveFly{
    0%{
        transform: rotateX(90deg) translateZ(-300px);
        opacity: 0;
    }
    50%{
        transform: rotateX(90deg) translateZ(-300px);
        opacity: 0;
    }
    75%{
        transform: rotateX(-90deg) translateZ(-300px);
        opacity: 1;
    }
    87.5%{
        transform: rotateX(-90deg) translateZ(-300px);
    }
    100%{
        transform: rotateX(-90deg) translateZ(-100px);
    }
}

.five div{
    width: 100%;
    display: flex;
    justify-content: center;
}

.six{
    transform: rotateX(-90deg) translateZ(100px);
    animation: sixFly 4s;
}

@keyframes sixFly{
    0%{
        transform: rotateX(90deg) translateZ(300px);
        opacity: 0;
    }
    62.5%{
        transform: rotateX(90deg) translateZ(300px);
        opacity: 0;
    }
    75%{
        transform: rotateX(-90deg) translateZ(300px);
        opacity: 1;
    }
    87.5%{
        transform: rotateX(-90deg) translateZ(300px);
    }
    100%{
        transform: rotateX(-90deg) translateZ(100px);
    }
}

.six div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@keyframes circle{
    0%{
        transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
    }
    100%{
        transform: rotateX(390deg) rotateY(390deg) rotateZ(390deg);
    }
}

下面是css注释版本：

body{
    background: pink;
    /* 设置背景颜色  少女粉 */
    margin: 0;
}

#wrap{
    perspective: 1000px;
}

.box{
    width: 200px;
    height: 200px;
    margin: 300px auto;
    position: relative;
    transform-style: preserve-3d;
    /* 三维空间 */
    transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
    /* 使用transform将这些筛子从重叠转变为立体的 */
    animation: circle 10s 4.5s linear infinite;
    /* 调用circle 让这个筛子旋转起来 */
}

.box >div{
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #e7e7e7;
    border-radius: 5px;
    box-shadow: 0 0 10px #bbb;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    /* 两端对齐 */
}

.box div span{
    /* 主要是筛子的红点 */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* 将筛子设置为有圆角的正方体 */
    background: #d82828;
    box-shadow: inset 0 5px #b60505, inset 0 -5px #fa5d5d;
    /* 红点内设置阴影 */
}

/* 这里不直接使用.one的原因是覆盖.box >div 这样才能得到你想要的结果 */
.box >div.one{
    justify-content: center;
    /* 水平方向居中 */
    align-items: center;
    /* 垂直方向对齐 */
    transform: rotateY(0deg) translateZ(100px);
    /* 将筛子面为1的设置为打开页面第一眼的初始面 */
    animation: oneFly 4s;
}

    /* 在这里将旋转前的每个面集合分为8个步骤
        1.分别是六个面依次从初始位置转到目标位置需要六个步骤
        2.这六个面全部都出来之后，有一部是这些面合起来形成筛子，形成筛子之后停顿一下，所以分了8个步骤   每个关键帧的占比是100/8
    */
@keyframes oneFly {
    0%{
        transform: rotateY(90deg) translateZ(300px);
        opacity: 0;
    }
    12.5%{
        transform: rotateY(0deg) translateZ(300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(0deg) translateZ(300px);
    }
    87.5%{
        transform: rotateY(0deg) translateZ(300px);
    }
    100%{
        transform: rotateY(0deg) translateZ(100px);
    }
}

.two{
    transform: rotateY(-90deg) translateZ(-100px);
    animation: twoFly 4s;
}

@keyframes twoFly {
    0%{
        transform: rotateY(0deg) translateZ(-300px);
        opacity: 0;
    }
    12.5%{
        transform: rotateY(0deg) translateZ(-300px);
        opacity: 0;
    }
    25%{
        transform: rotateY(-90deg) translateZ(-300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(-90deg) translateZ(-300px);
    }
    87.5%{
        transform: rotateY(-90deg) translateZ(-300px);
    }
    100%{
        transform: rotateY(-90deg) translateZ(-100px);
    }
}

.two span:nth-child(2){
    align-self: flex-end;
    /* 对齐红点 */
}

.three{
    transform: rotateY(0deg) translateZ(-100px);
    animation: threeFly 4s;
}

@keyframes threeFly{
    0%{
        transform: rotateY(90deg) translateZ(-300px);
        opacity: 0;
    }
    25%{
        transform: rotateY(90deg) translateZ(-300px);
        opacity: 0;
    }
    37.5%{
        transform: rotateY(0deg) translateZ(-300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(0deg) translateZ(-300px);
    }
    87.5%{
        transform: rotateY(0deg) translateZ(-300px);
    }
    100%{
        transform: rotateY(0deg) translateZ(-100px);
    }
}

.three span:nth-child(2){
    align-self: center;
}

.three span:nth-last-child(1){
    align-self: flex-end;
}

.four{
    flex-wrap: wrap;
    /* 给红点换行 */
    align-content: space-between;
    /* 两端对齐 */
    transform:rotateY(-90deg) translateZ(100px);
    animation: fourFly 4s;
}

@keyframes fourFly{
    0%{
        transform: rotateY(0deg) translateZ(300px);
        opacity: 0;
    }
    37.5%{
        transform: rotateY(0deg) translateZ(300px);
        opacity: 0;
    }
    50%{
        transform: rotateY(-90deg) translateZ(300px);
        opacity: 1;
    }
    75%{
        transform: rotateY(-90deg) translateZ(300px);
    }
    87.5%{
        transform: rotateY(-90deg) translateZ(300px);
    }
    100%{
        transform: rotateY(-90deg) translateZ(100px);
    }
}
.four span:nth-child(3){
    margin-right: 35px;
}

.five{
    flex-wrap: wrap;
    align-content: space-between;
    transform: rotateX(-90deg) translateZ(-100px);

    animation: fiveFly 4s;
}

@keyframes fiveFly{
    0%{
        transform: rotateX(90deg) translateZ(-300px);
        opacity: 0;
    }
    50%{
        transform: rotateX(90deg) translateZ(-300px);
        opacity: 0;
    }
    75%{
        transform: rotateX(-90deg) translateZ(-300px);
        opacity: 1;
    }
    87.5%{
        transform: rotateX(-90deg) translateZ(-300px);
    }
    100%{
        transform: rotateX(-90deg) translateZ(-100px);
    }
}

.five div{
    width: 100%;
    display: flex;
    justify-content: center;
}

.six{
    transform: rotateX(-90deg) translateZ(100px);
    animation: sixFly 4s;
}

@keyframes sixFly{
    0%{
        transform: rotateX(90deg) translateZ(300px);
        opacity: 0;
    }
    62.5%{
        transform: rotateX(90deg) translateZ(300px);
        opacity: 0;
    }
    75%{
        transform: rotateX(-90deg) translateZ(300px);
        opacity: 1;
    }
    87.5%{
        transform: rotateX(-90deg) translateZ(300px);
    }
    100%{
        transform: rotateX(-90deg) translateZ(100px);
    }
}

.six div{
    display: flex;
    flex-direction: column;
    /* 将div排列方式设置为竖列排 */
    justify-content: space-between;
}

@keyframes circle{
    0%{
        transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
    }
    100%{
        transform: rotateX(390deg) rotateY(390deg) rotateZ(390deg);
    }
}

菜到不会下载软件
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值