在线看毛片视频-国产免费av在线-欧美日韩一区二区三区-国产成人无码av在线播放无广告-亚洲人va欧美va人人爽-国产第一草草-西班牙黄色片-四虎在线网站8848-最新av片免费网站入口-东京热无码中文字幕av专区-日本大人吃奶视频xxxx-欧美精品一区二区三区四区五区-国产片天天弄-国产免费内射又粗又爽密桃视频-欧美爱爱网站-日韩v欧美

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

css完成3d動畫特效的代碼案例

css完成3d動畫特效的代碼案例

更新時間：2025-11-28 文章作者：未知 信息來源：網絡 閱讀次數：次

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...
網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。
本篇文章給大家帶來的內容是關于css實現3d動畫特效的代碼實例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

首先讓我們來看一張效果圖

1.1.1

527134537-5b70f2b61b784_articlex.gif

屬性

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

perspective-origin: 設置透視點的位置

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

1.1.1思路

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

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

（2）為其盒子設置樣式

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

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

 .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）為其設置動畫

 .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>書頁</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

2094583391-5b70f66722968_articlex.gif

1.1.2思路：

（1）有五個p，分別放上五個字。

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

（2）給box和p總體設置樣式

 #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）設置偽元素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: "學";
    }
    .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: "學";
    }
    .ze5:after{
        content: "生";
    }

（4）為其設置動畫

.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>動態字</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: "學";
        }
        .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: "學";
        }
        .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">學</p>
        <p class="ze5">生</p>
    </p>
</body>
</html>

1.1.3思路不寫，只寫源碼

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動畫</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>

相關推薦：

css3D+動畫的例子（附完整代碼）

css怎么實現卡片圖像翻轉效果？（特效示例）

以上就是css實現3d動畫特效的代碼實例的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

本類教程下載

系統下載排行

在线看毛片视频-国产免费av在线-欧美日韩一区二区三区-国产成人无码av在线播放无广告-亚洲人va欧美va人人爽-国产第一草草-西班牙黄色片-四虎在线网站8848-最新av片免费网站入口-东京热无码中文字幕av专区-日本大人吃奶视频xxxx-欧美精品一区二区三区四区五区-国产片天天弄-国产免费内射又粗又爽密桃视频-欧美爱爱网站-日韩v欧美
  • <li id="86scu"><menu id="86scu"></menu></li>
    <li id="86scu"></li>
    <button id="86scu"></button>
    • 

    <s id="86scu"></s><button id="86scu"><menu id="86scu"></menu></button>
  • 
国产精品区在线|
www.欧美日本|
国产福利片一区二区|
男女无套免费视频网站动漫|
伊人再见免费在线观看高清版
|
香蕉视频xxxx|
精品国产乱码久久久久久1区二区|
国产男女激情视频|
国产性生交xxxxx免费|
国产午夜福利视频在线观看|
国产九九九九九|
日韩在线一级片|
精品人妻一区二区三区四区在线|
www精品久久|
国产高清精品在线观看|
狠狠爱免费视频|
五月婷婷激情久久|
亚洲欧美手机在线|
一道本在线观看视频|
韩日视频在线观看|
日本wwww视频|
国产美女18xxxx免费视频|
污污视频在线免费|
福利在线一区二区|
男人搞女人网站|
日韩精品在线播放视频|
欧美大黑帍在线播放|
国产一区二区视频免费在线观看|
老头吃奶性行交视频|
奇米777在线|
精品丰满人妻无套内射|
欧美一级片中文字幕|
精品国产鲁一鲁一区二区三区|
最新黄色av网站|
日韩一级免费在线观看|
在线视频一二三区|
精品www久久久久奶水|
久久久精品视频国产|
www.中文字幕在线|
午夜啪啪福利视频|
欧美在线观看视频网站|
国产精品国三级国产av|
亚洲综合在线网站|
阿v天堂2018|
日韩视频在线观看一区二区三区|
国产精品沙发午睡系列|
最近免费观看高清韩国日本大全|
日本精品久久久久中文字幕|
亚洲国产一二三精品无码|
亚洲高清在线免费观看|
www.日本在线播放|
91大学生片黄在线观看|
欧美wwwwwww|
搡女人真爽免费午夜网站|
少妇高潮毛片色欲ava片|
午夜激情视频网|
手机av在线免费|
老熟妇仑乱视频一区二区|
精品少妇人妻av免费久久洗澡|
日韩第一页在线观看|
亚洲小视频网站|
依人在线免费视频|
欧美一级裸体视频|
日本在线视频www|
999香蕉视频|
欧美日韩一区二区在线免费观看|
人体内射精一区二区三区|
日本一区二区免费高清视频|
国产一伦一伦一伦|
www.久久av.com|
尤物国产在线观看|
爱爱爱视频网站|
www.亚洲一区二区|
av久久久久久|
日韩成人三级视频|
夜夜添无码一区二区三区|
东北少妇不带套对白|
自拍日韩亚洲一区在线|
日韩欧美国产免费|
久热免费在线观看|
欧美日韩精品区别|
91免费国产精品|
18禁裸男晨勃露j毛免费观看|
日韩激情视频一区二区|
噜噜噜久久亚洲精品国产品麻豆|
国产亚洲天堂网|
中文字幕永久有效|
国产 国语对白 露脸|
男人亚洲天堂网|
亚洲欧美一区二区三区不卡|
波多野结衣 作品|
国产熟女高潮视频|
亚洲色图久久久|
国产三级中文字幕|
成人小视频在线看|
黄色a级三级三级三级|
久艹视频在线免费观看|
爱情岛论坛vip永久入口|
无码人妻aⅴ一区二区三区日本|
www.好吊操|
亚洲精品综合在线观看|
日韩精品综合在线|
亚洲人视频在线|
欧美深夜福利视频|
1314成人网|
无码人妻精品一区二区三区在线|
9l视频白拍9色9l视频|
国产又粗又猛又爽又黄的网站|
毛片av免费在线观看|
黄色小视频大全|
天天干天天玩天天操|
阿v天堂2017|
久久福利一区二区|
国产aaaaa毛片|
精品国产一二三四区|
手机在线国产视频|
一本久道中文无码字幕av|
成年人视频大全|
看看黄色一级片|
中文字幕永久视频|
激情综合网婷婷|
国产午夜伦鲁鲁|
国产爆乳无码一区二区麻豆|
超碰人人草人人|
一道本视频在线观看|
男人日女人bb视频|
精品少妇在线视频|
97在线国产视频|
免费人成自慰网站|
www.男人天堂网|
男女激情免费视频|
日韩精品一区二区在线视频|
男人j进女人j|
强开小嫩苞一区二区三区网站|
亚洲精品久久久中文字幕|
中文字幕在线观看第三页|
茄子视频成人免费观看|
国产精品免费成人|
在线免费av播放|
亚洲综合欧美在线|
捷克做爰xxxⅹ性视频|
国产又爽又黄ai换脸|
老汉色影院首页|
波多野结衣 作品|
日本a在线免费观看|
91视频最新入口|
色哟哟精品视频|
久久出品必属精品|
国产成人亚洲综合无码|
国产在线播放观看|
欧美日韩在线中文|
91国内在线播放|
97中文字幕在线|
无码人妻丰满熟妇区毛片18|
日本久久精品一区二区|
午夜免费一级片|
国产亚洲黄色片|
国产免费999|
免费看黄色a级片|
1024av视频|
中文 日韩 欧美|
国产亚洲精品网站|
岛国av免费在线|
美女日批免费视频|
一二三av在线|
欧美a在线视频|
26uuu成人|
99热手机在线|
拔插拔插海外华人免费|
美女网站免费观看视频|
日韩久久久久久久久久久久|
国产成人久久婷婷精品流白浆|
日日干日日操日日射|
男女高潮又爽又黄又无遮挡|
中文字幕av导航|
日本男人操女人|
老太脱裤让老头玩ⅹxxxx|
亚洲三级在线观看视频|
亚洲欧洲日产国码无码久久99|
日韩精品视频网址|
一区二区成人网|
久久免费视频3|
轻点好疼好大好爽视频|
日本中文字幕观看|
91最新在线观看|
欧美 激情 在线|
激情伊人五月天|
国产成人免费高清视频|
国产一区二区在线观看免费视频|
91视频最新入口|
免费av观看网址|
www污在线观看|
伊人网在线免费|
欧美日韩视频免费在线观看|
日韩大片一区二区|
午夜在线观看av|
五月天婷婷亚洲|
亚洲欧美国产中文|
亚洲精品免费一区亚洲精品免费精品一区
|
www.com久久久|