【HTML+CSS】实现快速3D效果，六个案例源码分享，有效果图。3D球体、正方体+鼠标渐入渐出效果、贴图正方体、球体相册、行星环绕相册。附源码压缩包，下载即用

于 2024-07-15 16:36:52 发布
阅读量502 收藏 7
点赞数 14
文章标签： html css 3d 前端 javascript 贴图 windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fyh559/article/details/140441395
版权

场景描述

整理资料发现在开始学习HTML时，写了几个具有3D效果的页面，虽然简单，与其吃灰，那就把源码分享一下吧，不如做个记录也好。

效果图 + 源码

（1）、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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            /* background: skyblue; */
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            transform: rotateX(-30deg);
        }

        .contain>div {
            width: 200px;
            height: 200px;
            /* perspective: 1000px; */
            /* border: 1px solid black; */
            transform-style: preserve-3d;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* transition: 2s; */
            animation: run 2s linear infinite;
        }

        @keyframes run {
            from {}

            to {
                /* transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); */
                /* transform: rotateX(360deg) rotateY(360deg); */
                transform: rotateY(360deg);
                transform: rotate3d(1, 1, 1, 360deg);
                /* transform: rotate3d(360deg, 360deg, 360deg); */
            }
        }

        /* .contain:hover>div {} */

        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border-radius: 100px;
        }

        .bg1 {
            background: rgb(53, 63, 19);
            transform: rotateY(60deg);
        }

        .bg2 {
            background: rgb(31, 149, 173);
            transform: rotateY(120deg);
        }

        .bg3 {
            background: rgb(248, 90, 198);
            transform: rotateY(180deg);
        }

        .bg4 {
            background: rgb(212, 217, 175);
            transform: rotateY(-120deg);
        }

        .bg5 {
            background: rgb(233, 133, 133);
            transform: rotateY(-60deg);
        }

        .bg6 {
            background: rgb(172, 224, 49);
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box bg1"></div>
            <div class="box bg2"></div>
            <div class="box bg3"></div>
            <div class="box bg4"></div>
            <div class="box bg5"></div>
            <div class="box bg6"></div>
        </div>
    </div>
</body>

</html>

（2）、正方体测试 + 鼠标渐入渐出效果

在这里插入图片描述

源码如下：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: black;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            /* transform: rotateX(-30deg) rotateY(-30deg); */
        }

        .contain>div {
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* transition: 2s; */
            animation: run 4s linear infinite;
        }

        @keyframes run {
            0% {}

            /* 50% {
                transform: rotate3d(1, 1, 1, 360deg) rotateX(360deg) rotateZ(360deg);
                transform: rotate3d(1, 1, 1, 360deg);
            } */

            100% {
                /* transform: rotate3d(1, 1, 1, 360deg) rotateX(360deg) rotateZ(360deg); */
                /* transform: rotate3d(-1, -1, -1, -360deg); */
                transform: rotate3d(1, -1, 1, 360deg);
            }
        }

        .contain:hover>div {
            animation-play-state: paused;
        }

        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            line-height: 200px;
            border-radius: 30px;
        }

        .box>h1 {
            font-size: 160px;
            opacity: .8;
            color: white;
        }

        .bg1 {
            background: rgba(53, 63, 19, .6);
            transform: rotateX(-90deg) translateZ(100px);
        }

        .bg2 {
            background: rgba(31, 149, 173, .6);
            transform: rotateX(90deg) translateZ(100px);
        }

        .bg3 {
            background: rgba(248, 90, 198, .6);
            transform: rotateY(270deg) translateZ(100px);
        }

        .bg4 {
            background: rgba(212, 217, 175, .6);
            transform: rotateY(180deg) translateZ(100px);
        }

        .bg5 {
            background: rgba(233, 133, 133, .6);
            transform: rotateY(90deg) translateZ(100px);
        }

        .bg6 {
            background: rgba(172, 224, 49, .6);
            transform: rotateY(0deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box bg1">
                <h1>1</h1>
            </div>
            <div class="box bg2">
                <h1>2</h1>
            </div>
            <div class="box bg3">
                <h1>3</h1>
            </div>
            <div class="box bg4">
                <h1>4</h1>
            </div>
            <div class="box bg5">
                <h1>5</h1>
            </div>
            <div class="box bg6">
                <h1>6</h1>
            </div>
        </div>

    </div>
</body>

</html>

（3）、贴图正方体 + 鼠标渐入渐出效果

在这里插入图片描述

源码如下：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .contain>div {
            width: 400px;
            height: 400px;
            /* perspective: 1200px; */
            transform-style: preserve-3d;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* transition: 2s; */
            animation: run 6s linear infinite;
        }

        @keyframes run {
            from {}

            to {
                /* transform: rotateY(720deg) rotateX(720deg) rotateZ(720deg); */
                transform: rotateY(720deg) rotateX(720deg);
                /* transform: rotateY(720deg); */
                /* transform: rotate3d(1, 1, 1, 360deg); */
            }
        }

        .contain:hover>div {
            animation-play-state: paused;
        }

        .box {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            /* line-height: 400px; */
        }

        .box>img {
            width: inherit;
            height: inherit;
        }

        .bg1 {
            background: rgba(53, 63, 19, .6);
            transform: rotateX(-90deg) translateZ(200px);
        }

        .bg2 {
            background: rgba(31, 149, 173, .6);
            transform: rotateX(90deg) translateZ(200px);
        }

        .bg3 {
            background: rgba(248, 90, 198, .6);
            transform: rotateY(270deg) translateZ(200px);
        }

        .bg4 {
            background: rgba(212, 217, 175, .6);
            transform: rotateY(180deg) translateZ(200px);
        }

        .bg5 {
            background: rgba(233, 133, 133, .6);
            transform: rotateY(90deg) translateZ(200px);
        }

        .bg6 {
            background: rgba(172, 224, 49, .6);
            transform: rotateY(0deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box bg1">
                <img src="./images/am1.gif" alt="">
            </div>
            <div class="box bg2">
                <img src="./images/am2.gif" alt="">
            </div>
            <div class="box bg3">
                <img src="./images/am3.gif" alt="">
            </div>
            <div class="box bg4">
                <img src="./images/am4.gif" alt="">
            </div>
            <div class="box bg5">
                <img src="./images/am5.gif" alt="">
            </div>
            <div class="box bg6">
                <img src="./images/am6.gif" alt="">
            </div>
        </div>

    </div>
</body>

</html>

（4）、夜光球体

在这里插入图片描述

源码如下：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: black;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            /* background: skyblue; */
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .contain>div {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 1px solid black;
            transform-style: preserve-3d;
            /* transform: rotateX(30deg); */
            /* transition: 2s; */
            animation: run 4s linear infinite;
        }

        @keyframes run {
            0% {}

            100% {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }

        .box1 {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .box2 {
            width: 150px;
            height: 150px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .bg1 {
            /* border: 1px solid red; */
            border-radius: 100px;
            box-shadow: 0px 0px 100px red;
        }

        .bg2 {
            /* border: 1px solid red; */
            border-radius: 100px;
            box-shadow: 0px 0px 100px red;
        }

        .contain>div>div:nth-child(2) {
            transform: translateZ(50px);
        }

        .contain>div>div:nth-child(3) {
            transform: translateZ(-50px);
        }

        .contain>div>div:nth-child(4) {
            transform: rotateX(90deg);
        }

        .contain>div>div:nth-child(5) {
            transform: translateY(-50px) rotateX(90deg);
        }

        .contain>div>div:nth-child(6) {
            transform: translateY(50px) rotateX(90deg);
        }

        .contain>div>div:nth-child(7) {
            transform: translateX(-50px) rotateY(90deg);

        }

        .contain>div>div:nth-child(8) {
            transform: translateX(50px) rotateY(90deg);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
        </div>
    </div>
</body>

</html>

（5）、球体相册

在这里插入图片描述

源码如下：

<!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>Document</title>
    <link rel="stylesheet" href="./css/05.css">
</head>

<body>
    <div class="contain">
        <div>
            <!-- 球体部分 -->
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>

            <!-- 相册部分 -->
            <div class="box3"><img src="./images/am1.gif" alt=""></div>
            <div class="box3"><img src="./images/am2.gif" alt=""></div>
            <div class="box3"><img src="./images/am3.gif" alt=""></div>
            <div class="box3"><img src="./images/am4.gif" alt=""></div>
            <div class="box3"><img src="./images/am5.gif" alt=""></div>
            <div class="box3"><img src="./images/am6.gif" alt=""></div>

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

</html>
  • 以下是css源码
* {
    margin: 0;
    padding: 0;
}

body {
    background: black;
}

.contain {
    margin: 100px auto;
    width: 800px;
    height: 600px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.contain>div {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-style: preserve-3d;
    animation: run 4s linear infinite;
}

@keyframes run {
    0% {}

    100% {
        transform: rotate3d(1, 1, -1, 360deg);
    }
}

.box1 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.box2 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.box3 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 10px solid #ccc;
    box-shadow: 0px 0px 60px white;
    opacity: .8;
}

.box3>img {
    width: inherit;
    height: inherit;
}

.bg1 {
    border-radius: 100px;
    box-shadow: 0px 0px 100px red;
}

.bg2 {
    border-radius: 100px;
    box-shadow: 0px 0px 100px red;
}

.contain>div>div:nth-child(2) {
    transform: translateZ(50px);
}

.contain>div>div:nth-child(3) {
    transform: translateZ(-50px);
}

.contain>div>div:nth-child(4) {
    transform: rotateX(90deg);
}

.contain>div>div:nth-child(5) {
    transform: translateY(-50px) rotateX(90deg);
}

.contain>div>div:nth-child(6) {
    transform: translateY(50px) rotateX(90deg);
}

.contain>div>div:nth-child(7) {
    transform: translateX(-50px) rotateY(90deg);

}

.contain>div>div:nth-child(8) {
    transform: translateX(50px) rotateY(90deg);
}

.contain>div>div:nth-child(9) {
    transform: translateZ(200px);
}

.contain>div>div:nth-child(10) {
    transform: translateZ(-200px) rotateX(180deg);
}

.contain>div>div:nth-child(11) {
    transform: translateX(200px) rotateY(90deg);
}

.contain>div>div:nth-child(12) {
    transform: translateX(-200px) rotateY(90deg);
}

.contain>div>div:nth-child(13) {
    transform: rotateX(90deg) translateZ(200px);
}

.contain>div>div:nth-child(14) {
    transform: rotateX(90deg) translateZ(-200px);
}

（6）、行星环绕相册

在这里插入图片描述

源码如下：

<!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>Document</title>
    <link rel="stylesheet" href="./css/06.css">
</head>

<body>
    <div class="contain">
        <div>
            <div class="box"><img src="./images/01-a.png" alt=""></div>
            <div class="box"><img src="./images/02-a.png" alt=""></div>
            <div class="box"><img src="./images/03-a.png" alt=""></div>
            <div class="box"><img src="./images/04-a.png" alt=""></div>
            <div class="box"><img src="./images/05-a.png" alt=""></div>
            <div class="box"><img src="./images/06-a.png" alt=""></div>
            <div class="box"><img src="./images/07-a.png" alt=""></div>
            <div class="box"><img src="./images/08-a.png" alt=""></div>
            <div class="box"><img src="./images/06-a.png" alt=""></div>
            <div class="box"><img src="./images/05-a.png" alt=""></div>
            <div class="box"><img src="./images/03-a.png" alt=""></div>
            <div class="box"><img src="./images/12-a.png" alt=""></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <!-- <div class="box2 bg2">8</div> -->
        </div>
    </div>
</body>

</html>
  • 以下是css源码
* {
    margin: 0;
    padding: 0;
}

/* body {
    background: black;
} */

.contain {
    margin: 100px auto;
    width: 800px;
    height: 600px;
    /* background: skyblue; */
    perspective: 1000px;
    transform-style: preserve-3d;
    /* transform: rotateX(-18deg); */
    animation: rotate_contain 10s linear infinite;
    /* transform: rotate3d(1, 1, 1, -34deg); */
}

.contain>div {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* border: 1px solid black; */
    transform-style: preserve-3d;
    /* transform: rotateX(-18deg) rotateY(-18deg); */
    animation: run 10s linear infinite;
    /* transform: rotateY(-18deg); */
}

@keyframes run {
    0% {}

    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}

@keyframes rotate_contain {
    0% {
        transform: rotateX(-30deg);
    }

    50% {
        transform: rotateX(30deg);
    }

    100% {
        transform: rotateX(-30deg);
    }
}

.box {
    width: 80px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.box>img {
    width: inherit;
    height: inherit;
}

.contain>div>div:nth-child(1) {
    /* background: yellow; */
    transform: rotateY(30deg) translateZ(400px);
}

.contain>div>div:nth-child(2) {
    /* background: rgb(201, 201, 174); */
    transform: rotateY(60deg) translateZ(400px);
}

.contain>div>div:nth-child(3) {
    /* background: rgb(62, 160, 145); */
    transform: rotateY(90deg) translateZ(400px);
}

.contain>div>div:nth-child(4) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(120deg) translateZ(400px);
}

.contain>div>div:nth-child(5) {
    /* background: rgb(155, 62, 156); */
    transform: rotateY(150deg) translateZ(400px);
}

.contain>div>div:nth-child(6) {
    /* background: yellow; */
    transform: rotateY(180deg) translateZ(400px);
}

.contain>div>div:nth-child(7) {
    /* background: rgb(201, 201, 174); */
    transform: rotateY(210deg) translateZ(400px);
}

.contain>div>div:nth-child(8) {
    /* background: rgb(62, 160, 145); */
    transform: rotateY(240deg) translateZ(400px);
}

.contain>div>div:nth-child(9) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(270deg) translateZ(400px);
}

.contain>div>div:nth-child(10) {
    /* background: rgb(155, 62, 156); */
    transform: rotateY(300deg) translateZ(400px);
}

.contain>div>div:nth-child(11) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(330deg) translateZ(400px);
}

.contain>div>div:nth-child(12) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(360deg) translateZ(400px);
}

.box1 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    font-size: 50px;
    line-height: 200px;
}

.box2 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    font-size: 50px;
    line-height: 200px;
}

.bg1 {
    /* border: 1px solid red; */
    border-radius: 100px;
    box-shadow: 0px 0px 100px rgb(52, 186, 231);
}

.bg2 {
    /* border: 1px solid red; */
    border-radius: 100px;
    box-shadow: 0px 0px 100px rgb(0, 208, 255);
}

.contain>div>div:nth-child(13) {
    transform: translateZ(0px);
    /* background: black; */
}

.contain>div>div:nth-child(14) {
    /* background: black; */
    transform: translateZ(-50px);
}

.contain>div>div:nth-child(15) {
    /* background: black; */
    transform: rotateX(90deg) translateZ(50px);
}

.contain>div>div:nth-child(16) {
    /* background: black; */
    transform: translateY(0px) rotateX(90deg);
}

.contain>div>div:nth-child(17) {
    /* background: black; */
    transform: translateY(50px) rotateX(90deg);
}

.contain>div>div:nth-child(18) {
    /* background: black; */
    transform: translateZ(50px);

}

.contain>div>div:nth-child(19) {
    /* transform: translateZ(100px) rotateY(90deg); */
    background: white;
}

描述说明

这些代码已经蛮久了，没有写注释，见谅。当然也仅仅是作为参考。鉴于有些图片不好直接上传，最后我会把所有源码包括图片等资源一起打包上传。有需要的朋友可以自行免费领取。

博扬java张
关注
  • 14
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
精选9款迷人的HTML5 3D动画效果及源码
yanyiping992的博客
03-12 3892
新的一周开始了，今天小编要为大家分享最新整理的9款HTML5 3D动画效果及源码下载，前端爱好者都可以来学习一下，以下就是详细的内容，一起来看看。1、HTML5 3D图片折叠特效 超炫酷图片特效我们之前介绍过很多HTML5 3D图片效果，比如HTML5/CSS3 3D环形图片墙、HTML5 3D相册浏览等等。今天我们再来分享一款HTML5 3D图片折叠特效，鼠标滑过图片时，折叠好的图片便会展开，鼠...
【CSS3进阶】酷炫的3D旋转透视
xiaoshengjinbu的博客
08-03 255
之前学习 react+webpack ，偶然路过webpack 官网，看到顶部的 LOGO ，就很感兴趣。 最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。 先上demo，...
3D旋转相册+背景音乐
LXYDSF的博客
06-02 4366
参考网上其他大佬的代码,在六一这天给小学妹也搞了个,里面是她最喜欢的小李子的图片.希望她可以每天快乐. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>送给学妹的surprise</title> <link rel="stylesheet" href="css/span.css" /> &lt
css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）...
weixin_34366546的博客
03-09 344
　　本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性。 　　demo预览： 摩天轮式图片轮播 （貌似没兼容360 最好用chrome） 3D正方体（chrome only） 3D标签云（css3版 chrome only） 3D标签云（js版 chrome only） 前文回顾 　　在前面的文章css3实践之图片轮播（Transform，Transiti...
80个HTML5+js小游戏集合
qq_18745063的博客
04-19 350
80个HTML5小游戏：一个都不能死，捕鱼达人，3D魔方，蜘蛛纸牌，双人五子棋，罗盘时钟，黑客模拟器
HTML5 + CSS3 实现 3d 室内布局源码
03-22
此外，CSS3的`backface-visibility`属性也对3D效果有重要影响，它可以控制元素在翻转时是否显示背面，从而实现更真实的3D翻转效果。同时，`transform-style: preserve-3d;`能确保子元素继承父元素的3D空间，实现完整...
基于HTML5+CSS3实现鼠标悬停3D立体式图片效果源码.zip
11-21
本压缩包包含的资源是关于使用HTML5和CSS3实现的一种特殊效果——鼠标悬停时的3D立体式图片展示。 在HTML5中，`<img>`标签用于插入图像，而新的`<canvas>`元素则提供了动态图形绘制的能力，这在创建交互式效果时...
HTML+CSS实现3D旋转木马效果.zip
05-09
用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作...
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip
12-17
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...
通过 tomcat 让手机访问到电脑写的 html 网页
m0_75138009的博客
07-10 722
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2777
title>充电效果
html 关闭信息窗口
cuisidong1997的博客
07-14 156
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
使用linux的mail命令发送html格式的邮件
zh515858237的专栏
07-10 431
2、然后修改/etc/mail.rc，在文件末尾增加以下内容，指定邮箱和授权码。1、关闭本机的sendmail服务或者postfix服务。3、然后通过命令来发送邮件。3、授权码的获取方式。
初识HTML
Dxito_的博客
07-09 945
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
html（抽奖设计）
2301_81704123的博客
07-13 262
可以根据自己的喜好设计抽奖内容，或者修改颜色。
HTML 标签简写和全称及其对应的中文说明和实例
lulei5153的博客
07-10 498
【代码】HTML 标签简写和全称及其对应的中文说明和实例。
第一章节：HTML 基础
Toasten
07-08 1014
Web（World Wide Web）即全球广域网，也称为万维网。我们常说的 Web端 就是网页端。网页 是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera 等。
html dialog不显示边框
最新发布
cuisidong1997的博客
07-14 198
在这个例子中，border: none;用于移除 的边框，而 box-shadow: none;用于移除阴影，这样整个 看起来就像是透明的，没有边框和阴影。在HTML中， 元素默认情况下会显示一个边框。如果你想要一个不显示边框的对话框，你可以通过CSS来隐藏边框。html dialog不显示边框。这是一个不显示边框的对话框。
HTML 基础
2302_77179144的博客
07-11 729
文章目录HTML 结构认识 HTML 标签HTML 文件基本结构快速生成代码框架HTML 常见标签注释标签标题标签: h1-h6段落标签: p换行标签: br格式化标签图片标签: img超链接标签: a表格标签列表标签表单标签form 标签input 标签label 标签select 标签textarea 标签无语义标签: div & span综合案例: 填写简历信息Emmet 快捷键HTML 特殊字符 HTML: 页面有哪些元素组成 CSS:这些元素的样式、布局、排版等 JS:这些元素之间如何交
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@android:style/Theme.NoTitleBar"“属性。这样可以通过Android自带的主题去掉标题栏。 2. 使用自定义的主题，可以在样式表中添加以下代码： <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <!-- ...其他样式... --> </style> 这种方式可以通过设置主题去除ActionBar和标题栏，同时保留其他布局元素。 3. 去掉代码中的setTitle()方法，这是一种最简单的方法，通过不设置Activity的标题来实现无标题。 以上就是三种常见的实现Android无标题的方式，开发者可以根据实际需求进行选择。值得注意的是，去除标题栏可能会影响用户的导航体验，因此在设计上需要考虑周全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博扬java张

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值