CSS 特效攀登顶峰-CSDN博客

效果图：




<!--文档声明为 html（最新html5）-->
<!doctype html>
<html>
<head>
    <!--声明当前页面编码格式为国际编码（utf-8）还有一种中文编码（gbk/gb2312）-->
    <meta charset="UTF-8">
    <!--网页三要素-->
    <meta name="Keywords" content="关键词,关键词">
    <meta name="Description" content="描述">
    <title>网页的标题</title>
    <!--css 层叠样式表 衣服，化妆品 修饰body 页面-->
    <style>
        body {
            overflow: hidden;
            background: rgb(20, 20, 20);
        }

        .stage {
            position: relative;
            top: 500px;
            width: 150px;
            height: 320px;
            margin: auto;

            -webkit-perspective: 1200px;
            -webkit-perspective-origin: 50% 50%;
            perspective: 1200px;
            perspective-origin: 50% 50%;
        }

        .pyramid3d {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0 auto;

            -webkit-transition: -webkit-transform 1s ease-out;
            transition: transform 1s ease-out;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: rotateX(75deg) rotate(65deg);
            transform: rotateX(75deg) rotate(65deg);
            -webkit-animation: fall 3s linear infinite;
            animation: fall 3s linear infinite;
        }

        .triangle {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: left top;
            transform-origin: left top;
            width: 0;
            height: 0;
            background: none;
        }

        .triangle:before {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 176px 75px 0 75px;
            -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
        }

        .side1 {
            -webkit-transform: translatex(0) rotatey(115.2deg) rotatez(90deg);
            transform: translatex(0) rotatey(115.2deg) rotatez(90deg);
        }

        .side2 {
            -webkit-transform: translatex(150px) rotatez(90deg) rotatex(64.8deg);
            transform: translatex(150px) rotatez(90deg) rotatex(64.8deg);
        }

        .side3 {
            -webkit-transform: translatez(0) rotatex(64.8deg);
            transform: translatez(0) rotatex(64.8deg);
        }

        .side4 {
            -webkit-transform: translatey(150px) rotatex(115.2deg);
            transform: translatey(150px) rotatex(115.2deg);
        }

        .side1:before {
            border-color: rgba(115, 115, 0, 0.3) transparent transparent transparent;
            -webkit-animation: flipFirst 3s infinite;
            animation: flipFirst 3s infinite;
        }

        .side2:before {
            border-color: rgba(20, 90, 225, 0.3) transparent transparent transparent;
            -webkit-animation: flipSecond 3s infinite;
            animation: flipSecond 3s infinite;
        }

        .side3:before {
            border-color: rgba(255, 0, 0, 0.3) transparent transparent transparent;
            -webkit-animation: flipThird 3s infinite;
            animation: flipThird 3s infinite;
        }

        .side4:before {
            border-color: rgba(0, 255, 255, 0.3) transparent transparent transparent;
            -webkit-animation: flipFourth 3s infinite;
            animation: flipFourth 3s infinite;
        }

        @keyframes fall {
            0% {
                -webkit-transform: rotateX(75deg) rotate(65deg) translateZ( 176px);
                transform: rotateX(75deg) rotate(65deg) translateZ( 176px);
            }
            100% {
                -webkit-transform: rotateX(75deg) rotate(65deg) translateZ(-140px);
                transform: rotateX(75deg) rotate(65deg) translateZ(-140px);
            }
        }

        @keyframes flipFirst {
            12.5%,
            50% {
                -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
                -webkit-transform: rotatex(130deg);
                transform: rotatex(130deg);
            }
            50.0001%,
            87.5% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(-134px) rotatex(130deg);
            }
            100% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(-135px) rotatex(360deg);
            }
        }

        @keyframes flipSecond {
            25% {
                -webkit-transform: rotatex(0deg);
                transform: rotatex(0deg);
            }
            37.5%,
            50% {
                -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
                -webkit-transform: rotatex(-130deg);
                transform: rotatex(-130deg);
            }
            50.0001%,
            62.5% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(134px) rotatex(-130deg);
            }
            75%,
            100% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(134px) rotatex(-360deg);
            }
        }

        @keyframes flipThird {
            12.5% {
                -webkit-transform: rotatex(0deg);
                transform: rotatex(0deg);
            }
            25%,
            50% {
                -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
                -webkit-transform: rotatex(-130deg);
                transform: rotatex(-130deg);
            }
            50.0001%,
            75% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(134px) rotatex(-130deg);
            }
            87.5%,
            100% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(134px) rotatex(-360deg);
            }
        }

        @keyframes flipFourth {
            37.5% {
                -webkit-transform: rotatex(0deg);
                transform: rotatex(0deg);
            }
            50% {
                -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
                -webkit-transform: rotatex(130deg);
                transform: rotatex(130deg);
            }
            50.0001% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(-134px) rotatex(130deg);
            }
            62.5%,
            100% {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                transform: translateX(0px) translateY(286px) translateZ(-134px) rotatex(360deg);
            }
        }
    </style>
</head>
<body>
<div class="stage">
    <div class="pyramid3d">
        <div class="triangle side1"></div>
        <div class="triangle side2"></div>
        <div class="triangle side3"></div>
        <div class="triangle side4"></div>
    </div>
</div>
</body>
</html>