css實(shí)現(xiàn)3d動(dòng)畫(huà)特效的代碼實(shí)例

發(fā)布時(shí)間：2020-10-22 17:03:25 來(lái)源：億速云閱讀：201 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了css實(shí)現(xiàn)3d動(dòng)畫(huà)特效的代碼實(shí)例，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

首先讓我們來(lái)看一張效果圖

1.1.1

屬性

perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設(shè)置父元素上

perspective-origin: 設(shè)置透視點(diǎn)的位置

transform-style :指定某元素的子元素是位于三維空間內(nèi)，取值：flat | preserve-3d

1.1.1思路

（1）有三個(gè)p，一起放到一個(gè)盒子里面。

  <p class="container">
            <p class="cube">
                <p class="mian mian1"></p>
                <p class="mian mian2"></p>
                <p class="mian mian3"></p>
            </p>
        </p>

（2）為其盒子設(shè)置樣式

.cube{
        width: 200px;
        height: 300px;
        transform-style: preserve-3d;
        margin:100px auto;
       
        position: relative;
        transform: rotateX(30deg);
        border-radius: 50%;
            padding: 60px;
    }

(3)為其每個(gè)p設(shè)置樣式

 .mian{
        width: 200px;
        height: 300px;
        background-image: url(1.jpg);
        background-position:400px 0;
        position: absolute;
        background: url(aka.jpg);
        border: 1px solid #ccc;
        transition: 2s;
    }
    /* .mian1:hover{
        transform-origin: right;
        transform: rotateY(-60deg);
    } */
    .mian1{
        transform-origin: right;
        transform: translateX(-200px) rotateY(45deg);
        background-position:0 0;
    }

    .mian2{
        background-position: 400px 0;
    }

    .mian3{
        transform-origin: left;
        transform: translateX(200px) rotateY(45deg);
        background-position: 200px 0;
    }

（4）為其設(shè)置動(dòng)畫(huà)

 .mian3:hover{
        transform: translateX(200px) rotateY(0deg);
    } 
    .mian1:hover{
        transform: translateX(-200px) rotateY(0deg);
    }

1.1.1源碼：

<!DOCTYPE html>
<html lang="en">
<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>書(shū)頁(yè)</title>
    <style>
        .container{
            width: 1000px;
            height: 650px;
     
            perspective: 2000px;
            border: 1px solid transparent;
            overflow: hidden;
            margin: 0 auto;
            perspective-origin: 10% 20%;
           
        }
    
        .cube{
            width: 200px;
            height: 300px;
            transform-style: preserve-3d;
            margin:100px auto;
           
            position: relative;
            transform: rotateX(30deg);
            border-radius: 50%;
            padding: 60px;
        }
        .mian{
            width: 200px;
            height: 300px;
            background-image: url(1.jpg);
            background-position:400px 0;
            position: absolute;
            background: url(aka.jpg);
            border: 1px solid #ccc;
            transition: 2s;
        }
        /* .mian1:hover{
            transform-origin: right;
            transform: rotateY(-60deg);
        } */
        .mian1{
            transform-origin: right;
            transform: translateX(-200px) rotateY(45deg);
            background-position:0 0;
        }

        .mian2{
            background-position: 400px 0;
        }

        .mian3{
            transform-origin: left;
            transform: translateX(200px) rotateY(45deg);
            background-position: 200px 0;
        }
        .mian3:hover{
            transform: translateX(200px) rotateY(0deg);
        } 
        .mian1:hover{
            transform: translateX(-200px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <p class="container">
        <p class="cube">
            <p class="mian mian1"></p>
            <p class="mian mian2"></p>
            <p class="mian mian3"></p>
        </p>
    </p>
</body>
</html>

1.1.2

css實(shí)現(xiàn)3d動(dòng)畫(huà)特效的代碼實(shí)例

1.1.2思路：

（1）有五個(gè)p，分別放上五個(gè)字。

  <p id="box">
        <p class="ze1">前</p>
        <p class="ze2">端</p>
        <p class="ze3">小</p>
        <p class="ze4">學(xué)</p>
        <p class="ze5">生</p>
    </p>

（2）給box和p總體設(shè)置樣式

 #box{
        margin: 100px auto;
        font-size: 100px;
        color:#005aa0;
        text-align: center;
    }
 .ze1,.ze2,.ze3,.ze4,.ze5{
        display: inline-block;
        width: 90px;
        height: 100%;
        position: relative;
    }

（3）設(shè)置偽元素before和after

  .ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{
        content:attr(data);
        position: absolute;
        color: #ffffff;
        top:0;
        left: 2px;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:before{
        content: "前";
    }
    .ze2:before{
        content: "端";
    }
    .ze3:before{
        content: "小";
    }
    .ze4:before{
        content: "學(xué)";
    }
    .ze5:before{
        content: "生";
    }
    .ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
        position: absolute;
        color: #b3b3b3;
        top:3px;
        left: 10px;
        z-index: -1;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:after{
        content: "前";
    }
    .ze2:after{
        content: "端";
    }
    .ze3:after{
        content: "小";
    }
    .ze4:after{
        content: "學(xué)";
    }
    .ze5:after{
        content: "生";
    }

（4）為其設(shè)置動(dòng)畫(huà)

.ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{
        transform: rotateY(-40deg) skewY(10deg);
    }
    .ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{
        transform: rotateY(40deg) skewY(10deg);
    }

1.1.2源碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動(dòng)態(tài)字</title>
    <style>
        #box{
            margin: 100px auto;
            font-size: 100px;
            color:#005aa0;
            text-align: center;
        }
        .ze1,.ze2,.ze3,.ze4,.ze5{
            display: inline-block;
            width: 90px;
            height: 100%;
            position: relative;
        }
        .ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{
            content:attr(data);
            position: absolute;
            color: #ffffff;
            top:0;
            left: 2px;
            transform-origin: left;
            transition: transform .5s;
        }
        .ze1:before{
            content: "前";
        }
        .ze2:before{
            content: "端";
        }
        .ze3:before{
            content: "小";
        }
        .ze4:before{
            content: "學(xué)";
        }
        .ze5:before{
            content: "生";
        }
        .ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
            position: absolute;
            color: #b3b3b3;
            top:3px;
            left: 10px;
            z-index: -1;
            transform-origin: left;
            transition: transform .5s;
        }
        .ze1:after{
            content: "前";
        }
        .ze2:after{
            content: "端";
        }
        .ze3:after{
            content: "小";
        }
        .ze4:after{
            content: "學(xué)";
        }
        .ze5:after{
            content: "生";
        }
        .ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{
            transform: rotateY(-40deg) skewY(10deg);
        }
        .ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{
            transform: rotateY(40deg) skewY(10deg);
        }
    </style>
</head>
<body>
    <p id="box">
        <p class="ze1">前</p>
        <p class="ze2">端</p>
        <p class="ze3">小</p>
        <p class="ze4">學(xué)</p>
        <p class="ze5">生</p>
    </p>
</body>
</html>

1.1.3思路不寫(xiě)，只寫(xiě)源碼

1.1.3源碼：

  <!DOCTYPE html>
<html lang="en">
<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>3d動(dòng)畫(huà)</title>
   
    <style>
    body{
    margin: 0;   
    background:url(iom.jpg) ; 
    background-size:100%;
    position: relative;
}

.box{
    width:430px;
    height: 430px;
    position: absolute;;
    top:100px;
    left: 480px;
    border: 1px solid #ccc;
    border-radius: 215px;
    text-align: center;
    animation: dong 20s infinite linear;
   
}

.ai{
    width:10px;
    height: 10px;
    background: #0c0;
    border-radius: 5px;
    position: absolute;
    right:38px;
    top: 340px;
}

@keyframes dong{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mrin{
    width:320px;
    height: 320px;
    border:1px solid #ccc;
    border-radius: 180px;
    position: absolute;
    top:155px;
    left: 535px; 
    animation: mi 15s infinite linear;
}

.ak{
    width:50px;
    height: 50px;
    border: 1px solid #ccc;
    margin: 20px 0 0 20px;
    border-radius: 25px;
    display: inline-block;
    animation: ol 5s infinite linear;
}

.ak .sj1{
    width:10px;
    height:10px;
    border-radius: 5px;
    margin:20px 0 0 20px;
    background: blue;
}

.ak .sj2{
    width: 10px;
    height: 10px;
    margin-top:5px;
    background: #fff;
    border-radius: 5px;
}


@keyframes mi{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}



@keyframes ol{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mian{
    width: 240px;
    height: 240px;
    border:1px solid #ccc;
    position: absolute;
    border-radius: 120px;
    top:195px;
    left:575px;
    animation: af 5s infinite linear;
}


.mian .ap{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f0f;
    margin:30px 0 0 30px; 

}


@keyframes af{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.chen{
    width: 160px;
    height: 160px;
    border: 1px solid #ccc;
    position: absolute;
    border-radius: 80px;
    top:235px;
    left:615px;
    animation: oa 4s infinite linear;
}


.ze{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0c0;
    margin: 20px 0 0 15px;
}


@keyframes oa{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}

.yu{
    width: 80px;
    height: 80px;
    background-color:darkorange;
    border-radius: 40px;
    position: absolute;
    top:275px;
    left:655px;
    opacity: .7;
}
    
    </style>
</head>
<body>
    <p class="box">
        
        <p class="ai"></p>
    </p>
        <p class="mrin">
            <p class="ak">
                <p class="sj1"></p>
                <p class="sj2"></p>
            </p>  
               
            
        </p>
            <p class="mian">
                <p class="ap"></p>
            </p>
                <p class="chen">
                    <p class="ze"></p>
                    </p>
                        <p class="yu"></p>
                   
                
         
      
    

</body>
</html>

.ak .sj2{
    width: 10px;
    height: 10px;
    margin-top:5px;
    background: #fff;
    border-radius: 5px;
}


@keyframes mi{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}



@keyframes ol{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mian{
    width: 240px;
    height: 240px;
    border:1px solid #ccc;
    position: absolute;
    border-radius: 120px;
    top:195px;
    left:575px;
    animation: af 5s infinite linear;
}


.mian .ap{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f0f;
    margin:30px 0 0 30px; 

}


@keyframes af{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.chen{
    width: 160px;
    height: 160px;
    border: 1px solid #ccc;
    position: absolute;
    border-radius: 80px;
    top:235px;
    left:615px;
    animation: oa 4s infinite linear;
}


.ze{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0c0;
    margin: 20px 0 0 15px;
}


@keyframes oa{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}

.yu{
    width: 80px;
    height: 80px;
    background-color:darkorange;
    border-radius: 40px;
    position: absolute;
    top:275px;
    left:655px;
    opacity: .7;
}
    
    </style>
</head>
<body>
    <p class="box">
        
        <p class="ai"></p>
    </p>
        <p class="mrin">
            <p class="ak">
                <p class="sj1"></p>
                <p class="sj2"></p>
            </p>  
               
            
        </p>
            <p class="mian">
                <p class="ap"></p>
            </p>
                <p class="chen">
                    <p class="ze"></p>
                    </p>
                        <p class="yu"></p>
                   
                
         
      
    

</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css實(shí)現(xiàn)3d動(dòng)畫(huà)特效的代碼實(shí)例內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

css實(shí)現(xiàn)3d動(dòng)畫(huà)特效的代碼實(shí)例

1.1.1

屬性

1.1.1思路

（1）有三個(gè)p，一起放到一個(gè)盒子里面。

（2）為其盒子設(shè)置樣式

(3)為其每個(gè)p設(shè)置樣式

（4）為其設(shè)置動(dòng)畫(huà)

1.1.1源碼：

1.1.2

1.1.2思路：

（1）有五個(gè)p，分別放上五個(gè)字。

（2）給box和p總體設(shè)置樣式

（3）設(shè)置偽元素before和after

（4）為其設(shè)置動(dòng)畫(huà)

1.1.2源碼：

1.1.3思路不寫(xiě)，只寫(xiě)源碼

1.1.3源碼：

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

（1）有三個(gè)p，一起放到一個(gè)盒子里面。

（1）有五個(gè)p，分別放上五個(gè)字。

1.1.3思路不寫(xiě)，只寫(xiě)源碼