800av在线免费观看,日韩人妻无码精品久久久不卡,8x8x最新地址

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

本篇文章所說的內容是純CSS實現3D的代碼（正方體、動態立體圖片冊、平面的星空），代碼都非常詳細，有需要的朋友可以看一下。

一、正方體

我認為正方體可以算是3D圖像的基礎吧，首先正方體是由六個相同的面所組成，其次就需要我們依次構造。（據體構造在代碼中）

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>正方體</title>
<style>
    .d3{
        height: 300px;
        width:300px;
        perspective: 800px;
        margin:140px auto;
        border:1px solid #ccc;    }
    .stage{
        height: 300px;
        width: 300px;
        transform-style: preserve-3d;
        
        position: relative;
        transform: rotateX(45deg) rotateY(45deg);
        
    }
    .role{
        height: 300px;
        width: 300px;
        position: absolute;
    }
    .stage{
        animation: dong 3s linear infinite;（這是舞臺）

    }
    .stage:hover{
        animation: paused;
    }
    @keyframes dong{（這是使舞臺旋轉的動畫）
        from{
        transform: rotateX(45deg) rotateY(45deg);            
        }
        to{
        transform: rotateX(405deg) rotateY(405deg);
        }
    }
    .di1{（正方體的前面）
        background: rgb(21, 163, 52);
        transform: translateZ(150px);（沿著z軸向前移動150px）
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di2{（正方體的后面）
        background: blue;
        transform: translateZ(-150px) rotateY(180deg);（沿著z軸向前移動150px然后沿著y軸旋轉180°*注意順序哦是先移動后旋轉）
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di3{（正方體的左面）
        background: purple;
        transform: rotateY(-90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di4{（正方體的右面）
        background: pink;
        transform: rotateY(90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di5{（正方體的上面）
        background: red;
        transform: rotateX(90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di6{（正方體的下面）
        background: yellow;
        transform: rotateX(-90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
</style>
</head>
<body>
    <div>
        <div>
        （將正方體分為六個相同的面）
            <div class="role di1">前</div>
            <div class="role di2">后</div>
            <div class="role di3">左</div>
            <div class="role di4">右</div>
            <div class="role di5">上</div>
            <div class="role di6">下</div>
        </div>
    </div>
</body>
</html>

二、動態立體圖片冊

將圖片冊設計成立體3D的效果

利用旋轉、移動、傾斜和3D效果讓你的圖冊更加漂亮。
代碼如下：

（將第一張定好位置后將后面的依次排列）
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事例一</title>
    <style>
        body{
            height: 100vh;
        }
        .div {
            height: 500px;
            width: 800px;
            perspective: 800px;
            margin: 50px auto;
        }

        .div1 {
            height: 500px;
            width: 800px;
            transform-style: preserve-3d;
            position: relative;
            /* transform: rotateY(-10deg); */
        }
        .div_0{
            height:400px;
            width:600px;
            position: absolute;
            margin-top:110px;
            margin-left:50px;
        }
        .div_1{
            height:400px;
            width:600px;
            background: url(../day03/timg.jpg);
            background-size: 600px 400px;
            border-radius: 20px;
            transform-origin: right bottom;
            transition: 3s;
        }

        .div_2{
            background: url(../day03/timg1.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(2deg) translateZ(-20px) translateX(20px) translateY(-20px);
        }
        .div_2:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_2:hover~.div_1{
            /* transform-origin: right bottom; */
            transform: rotateZ(2deg) translateZ(20px) translateX(20px) translateY(-20px);
            transition: 1s;
        }
        /* body:hover .div_1{
            opacity: 0;
            transition: 3s;
        } */

        .div_3{
            background: url(timg2.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(4deg)translateZ(-40px)translateX(40px)translateY(-40px);

        }
        .div_3:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_4{
            background: url(timg4.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(6deg)translateZ(-60px) translateX(60px)translateY(-60px);
            
        }
        .div_4:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_5{
            background: url(timg5.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(8deg)translateZ(-80px) translateX(80px)translateY(-80px);
        }
        .div_5:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_6{
            background: url(timg3.jpg) no-repeat;
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(10deg)translateZ(-100px) translateX(100px)translateY(-100px);
        }
        .div_6:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <div class=" div_0 div_1"></div>
            <div class=" div_0 div_2"></div>
            <div class=" div_0 div_3"></div>
            <div class=" div_0 div_4"></div>
            <div class=" div_0 div_5"></div>
            <div class=" div_0 div_6"></div>
        </div>
    </div>
</body>

</html>

三、平面的星空

代碼如下：
（由于沒有用js所以只有平面的效果了
你掌握好旋轉的中心點就很容易了）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>太陽系</title>
<style>
    body {
        background: url(timg01.jpg) no-repeat;
        background-size: 100%;
    }

    .box1 {
        height: 600px;
        width: 600px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
    }

    .box1_0 {
        height: 100px;
        width: 100px;
        margin: 0 auto;
        border: 1px solid white;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 59px);
        left: 322px;
        transform-origin: 345.5px;
        animation: dong2 5s linear infinite 4s;
    }

    @keyframes dong2 {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box1_2 {
        height: 13px;
        width: 13px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: white;
        position: absolute;
        top: calc(50% - 7.5px);
        left: 96px;
        transform-origin: -45px;
        animation: dong3 5.5s linear infinite ;
        /* animation-iteration-count: 200; */
    }

    @keyframes dong3 {
        from {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box1_1 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: rgb(7, 100, 223);
        position: absolute;
        top: 45px;
        left: calc(50% - 16.5px);
    }

    .box2 {
        height: 400px;
        width: 400px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 200px);
        left: calc(50% - 200px);
    }

    .box2_1 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: rgb(198, 208, 221);
        position: absolute;
        top: calc(50% - 7.5px);
        left: 43px;
        transform-origin: 157.5px;
        animation: dong1 5s linear infinite .5s;

    }

    @keyframes dong1 {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box2_2 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        border-radius: 50%;
        background: #644e11;
        position: absolute;
        top: calc(50% - 7.5px);
        left: -7px;
        transform-origin: 207.5px;
        animation: dong 5s linear infinite;
    }

    @keyframes dong {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box3 {
        height: 300px;
        width: 300px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 150px);
        left: calc(50% - 150px);
    }

    .box4 {
        height: 30px;
        width: 30px;
        margin: 0 auto;
        border-radius: 50%;
        background: orange;
        position: absolute;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
    }
    .boxli{
        height: 900px;
        width: 900px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
       position: absolute;
       top:-120px;
       left:calc(50% - 450px);
        
    }
    .boxli_1{
        height: 15px;
        width: 15px;
        margin: 0 auto;
        border-radius: 50%;
        background: rgb(116, 100, 56);
        position: absolute;
        top:500px;
       left:-6px;
       transform-origin: 455.5px -38px;
        animation: dongli 5s linear infinite;
    }
    @keyframes dongli {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
</head>
<body>
    <div class="box1">
        <div class="box1_0">
            <div class="box1_2"></div>
            <div class="box1_1"></div>
        </div>
        <div class="box2">
            <div class="box2_1"></div>
            <div class="box2_2"></div>
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
    </div>
    <div class="boxli">
        <div class="boxli_1"></div>
</div>
</body>
</html>

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

純CSS完成3D的代碼（正方體、動態立體圖片冊、平面的星空）

一、正方體

二、動態立體圖片冊

三、平面的星空

本類教程下載

系統下載排行