• 前端练手3D爱心

    文章目录

    盒子模型常用属性（认识）

    overflow: hidden;定义盒子不随浮动
    margin-left: 50px:使盒子距离外边距左(右上下)50px
    margin: 100px auto:使盒子距离外边距上下左右100px
    margin: 使盒子距离外边距上右下左为50px 0 0 50px;
    margin: 20px 30px:使盒子距离外边距上下20px,左右30px
    margin: 10px:使盒子距离外边距上下左右都是10px
    border: 5px solid red:定义盒子边框(5px 单实线 红色) {dotted点double双实线}
    border-radius: 50px:使盒子边角变圆
    border-radius: 50%（1-8个值，顺时针）:使盒子变圆
    border-top-left-radius: 50%:使盒子左上角变圆
    display: inline-block:将块级元素div盒子等放到一行

    效果一 爱心半边

    <!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">
    <title>爱心半圆</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div {
            /*宽*/
            width: 100px;
            /*高*/
            height: 170px;
            /*边款颜色*/
            border: 2px solid red;
            /*盒子居中*/
            margin: 100px auto;
            /*盒子变圆：border-radius: 50%; */
            /*border-radius: 左上角 中间线  右上角;*/
            border-radius: 50% 50% 0/40% 50% 0;
            /* border-radius: 50%; */
            /* 去掉下面多余的线 */
            border-left: 0;
            border-bottom: 0;
            /* y坐标45°倾斜左边 */
            transform: rotateZ(45deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    效果：
    在这里插入图片描述

    效果二 爱心整合生成

    js将半爱心旋转一周生成爱心

    <!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">
    <title>整合一个爱心</title>
    <style type="text/css">
        /* 清空值 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* 背景修改为黑色 */
        
        body {
            background: #000;
        }
        /*  引用div内的love3d元素*/
        
        .love3d {
            position: relative;
            width: 100px;
            height: 170px;
            margin: 100px auto;
        }
        /* 引用script内的heart */
        
        .heart {
            /* 相对于love3d 定位 */
            position: absolute;
            /* 定位坐标 36个半爱心的位置 0会重叠为一个半圆 */
            left: 0;
            top: 0;
            width: 100px;
            height: 170px;
            border: 2px solid red;
            border-radius: 50% 50% 0/40% 50% 0;
            border-left: 0;
            border-bottom: 0;
        }
    </style>
</head>

<body>
    <!-- div类名love3d -->
    <div class="love3d"></div>
    <script type="text/javascript">
        //在document文档下通过ClassName获取Elements元素
        //类数组长度为1
        var love3d = document.getElementsByClassName("love3d")[0];
        for (var i = 0; i < 36; i++) {
            // 创建一个元素
            var tDiv = document.createElement("div");
            //对象类名
            tDiv.className = "heart";
            //将所有半圆整体Y旋转10°，Z旋转45°，x坐标设置35像素大小
            tDiv.style.transform = "rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(35px)";
            // love3d元素内添加tDiv
            love3d.appendChild(tDiv);
        }
    </script>

</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    效果：
    在这里插入图片描述

    效果三 实现立方体爱心

    <!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">
    <title>立方体旋转</title>
    <style type="text/css">
        /* 立体效果设置 */
        
        body {
            perspective: 1000px;
        }
        
        #cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 300px auto;
            /* z方向的百分之五十为101 */
            transform-origin: 50% 50% -101%;
            /* 盒子修改为3d空间 */
            transform-style: preserve-3d;
            /* 鼠标移动2秒的过渡 */
            transition: 2s;
        }
        
        #cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            border: 2px solid red;
        }
        /* 对于下面的div标签 */
        
        #cube div:nth-child(1) {
            /* 上 */
            top: -202px;
            /* 旋转基地 xyz方向 */
            /*默认值 transform-origin: 50% 50% 0; */
            transform-origin: bottom;
            /* 围绕x坐标 */
            transform: rotateX(90deg);
        }
        
        #cube div:nth-child(2) {
            top: 202px;
            /* 下 */
            /* 围绕 上边对称 旋转-90° */
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        
        #cube div:nth-child(3) {
            left: -202px;
            /* 左 */
            /* 围绕y坐标 */
            transform-origin: right;
            transform: rotateY(-90deg);
        }
        
        #cube div:nth-child(4) {
            left: 202px;
            /* 右 */
            transform-origin: left;
            transform: rotateY(90deg);
        }
        
        #cube div:nth-child(5) {
            top: 0px;
            /* 前 */
        }
        
        #cube div:nth-child(6) {
            top: 0px;
            /* 后 */
            /* 宽加边款的长度 */
            transform: translateZ(-202px);
        }
        
        #cube:hover {
            /* 实现鼠标停留在页面 以360°旋转 */
            transform: rotateY(360deg);
        }
    </style>
</head>

<body>
    <div id="cube">
        <div>上</div>
        <div>下</div>
        <div>左</div>
        <div>右</div>
        <div>前</div>
        <div>后</div>

    </div>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103

    效果在这里插入图片描述

    最终效果 3D爱心

    <!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">
    <title>整合一个爱心</title>
    <style type="text/css">
        /* 清空值 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* 背景修改为黑色 */
        
        body {
            background: #000;
        }
        /*  引用div内的love3d元素*/
        /* 爱心3D调整 */
        
        .love3d {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            /* 浏览器定位居中 */
            /* margin: 100px auto; */
            /* 开启3D效果 */
            margin-left: -50px;
            margin-top: -80px;
            transform-style: preserve-3d;
            /* css自定义动画，参数：名称 时间 匀速 无限重复 */
            animation: yes 10s linear infinite;
        }
        /* 启动自定义动画 0-360°*/
        
        @keyframes yes {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(180deg);
            }
        }
        /* 引用script内的heart */
        
        .heart {
            /* 相对于love3d 定位 */
            position: absolute;
            /* 定位坐标 36个半爱心的位置 0会重叠为一个半圆 */
            left: 0;
            top: 0;
            width: 100px;
            height: 170px;
            border: 2px solid red;
            border-radius: 50% 50% 0/40% 50% 0;
            border-left: 0;
            border-bottom: 0;
        }
        /* 图片3d调整 */
        
        .cube {
            position: relative;
            width: 50px;
            height: 50px;
            transform-style: preserve-3d;
            /* 调整图片的位置 */
            transform: translateX(32px) translateY(54px) translateZ(27px);
        }
        
        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
        }
        
        .cube div:nth-child(1) {
            /* 上 */
            top: -50px;
            /* 旋转基地 xyz方向 */
            /*默认值 transform-origin: 50% 50% 0; */
            transform-origin: bottom;
            /* 围绕x坐标 */
            transform: rotateX(90deg);
        }
        
        .cube div:nth-child(2) {
            top: 50px;
            /* 下 */
            /* 围绕 上边对称 旋转-90° */
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        
        .cube div:nth-child(3) {
            left: -50px;
            /* 左 */
            /* 围绕y坐标 */
            transform-origin: right;
            transform: rotateY(-90deg);
        }
        
        .cube div:nth-child(4) {
            left: 50px;
            /* 右 */
            transform-origin: left;
            transform: rotateY(90deg);
        }
        
        .cube div:nth-child(5) {
            /* 前 */
        }
        
        .cube div:nth-child(6) {
            /* 后 */
            /* 宽加边款的长度 */
            transform: translateZ(-50px);
        }
        
        .cube div img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- div类名love3d -->
    <div class="love3d">
        <!-- div 盒子 -->
        <div class="cube">
            <div><img src="./a.webp"></div>
            <div><img src="./a.webp"></div>
            <div><img src="./a.webp"></div>
            <div><img src="./a.webp"></div>
            <div><img src="./a.webp"></div>
            <div><img src="./a.webp"></div>

        </div>

    </div>
    <script type="text/javascript">
        //在document文档下通过ClassName获取Elements元素
        //类数组长度为1
        var love3d = document.getElementsByClassName("love3d")[0];
        for (var i = 0; i < 36; i++) {
            // 创建一个元素
            var tDiv = document.createElement("div");
            //对象类名
            tDiv.className = "heart";
            //将所有半圆整体Y旋转10°，Z旋转45°，x坐标设置35像素大小
            tDiv.style.transform = "rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(35px)";
            // love3d元素内添加tDiv
            love3d.appendChild(tDiv);
        }
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165

    在这里插入图片描述

  • 相关阅读:
    ES6及其后续版本的新特性的理解
    JavaScript 函数 function
    王道数据结构5.2（树的应用）
    jquery ajax 全局设置header
    十四、垃圾回收概述
    Hive查询操作详解
    树莓派系统镜像备份
    LeetCode 1765 Map of Highest Peak (多源点BFS 推荐)
    SPARK中的wholeStageCodegen全代码生成--以aggregate代码生成为例说起（8）
    《逃出大英博物馆》B站千万播放，国风文化才是主流
  • 原文地址：https://blog.csdn.net/qq_47945825/article/details/127718803