这回再高新管委会驻场,需要到一个效果,没办法,只能手写 ,来吧!
微信图片编辑_20201216083415.jpg

先来个网上的示例,这个是个动画效果

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
            }
            body {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .day-05 {
                background: #01161e;
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
            }
            .day-05 .container {
                width: 500px;
                height: 500px;
                margin: auto;
                position: relative;
            }
            .day-05 .container .geom {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            .day-05 .container .geom:nth-child(1) {
                transform: rotate(25deg);
                animation: rotateScale2 6s 1s ease-in-out infinite alternate, appear 6s 1s ease-in-out forwards;
            }
            @keyframes rotateScale1 {
                0% {
                    transform: rotate(20deg);
                }
                50% {
                    transform: rotate(-160deg) scale(0.1);
                }
                100% {
                    transform: rotate(-340deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(2) {
                transform: rotate(50deg);
                animation: rotateScale2 3s 0.6s ease-in-out infinite alternate, appear 3s 0.6s ease-in-out forwards;
            }
            @keyframes rotateScale2 {
                0% {
                    transform: rotate(40deg);
                }
                50% {
                    transform: rotate(220deg) scale(0.1);
                }
                100% {
                    transform: rotate(400deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(3) {
                transform: rotate(75deg);
                animation: rotateScale2 6s 3s ease-in-out infinite alternate, appear 6s 3s ease-in-out forwards;
            }
            @keyframes rotateScale3 {
                0% {
                    transform: rotate(60deg);
                }
                50% {
                    transform: rotate(-120deg) scale(0.1);
                }
                100% {
                    transform: rotate(-300deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(4) {
                transform: rotate(100deg);
                animation: rotateScale4 3s 1.2s ease-in-out infinite alternate, appear 3s 1.2s ease-in-out forwards;
            }
            @keyframes rotateScale4 {
                0% {
                    transform: rotate(80deg);
                }
                50% {
                    transform: rotate(260deg) scale(0.1);
                }
                100% {
                    transform: rotate(440deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(5) {
                transform: rotate(125deg);
                animation: rotateScale2 6s 5s ease-in-out infinite alternate, appear 6s 5s ease-in-out forwards;
            }
            @keyframes rotateScale5 {
                0% {
                    transform: rotate(100deg);
                }
                50% {
                    transform: rotate(-80deg) scale(0.1);
                }
                100% {
                    transform: rotate(-260deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(6) {
                transform: rotate(150deg);
                animation: rotateScale6 3s 1.8s ease-in-out infinite alternate, appear 3s 1.8s ease-in-out forwards;
            }
            @keyframes rotateScale6 {
                0% {
                    transform: rotate(120deg);
                }
                50% {
                    transform: rotate(300deg) scale(0.1);
                }
                100% {
                    transform: rotate(480deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(7) {
                transform: rotate(175deg);
                animation: rotateScale2 6s 7s ease-in-out infinite alternate, appear 6s 7s ease-in-out forwards;
            }
            @keyframes rotateScale7 {
                0% {
                    transform: rotate(140deg);
                }
                50% {
                    transform: rotate(-40deg) scale(0.1);
                }
                100% {
                    transform: rotate(-220deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(8) {
                transform: rotate(200deg);
                animation: rotateScale8 3s 2.4s ease-in-out infinite alternate, appear 3s 2.4s ease-in-out forwards;
            }
            @keyframes rotateScale8 {
                0% {
                    transform: rotate(160deg);
                }
                50% {
                    transform: rotate(340deg) scale(0.1);
                }
                100% {
                    transform: rotate(520deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(odd) .vertice {
                background: #0fe5b0;
            }
            .day-05 .container .geom:nth-child(odd) .vertice::before,
            .day-05 .container .geom:nth-child(odd) .vertice::after {
                background: #0fe5b0;
            }
            .day-05 .container .geom:nth-child(even) .vertice {
                background: #fff;
            }
            .day-05 .container .geom:nth-child(even) .vertice::before,
            .day-05 .container .geom:nth-child(even) .vertice::after {
                background: #fff;
            }
            .day-05 .container .geom .vertice {
                position: absolute;
            }
            .day-05 .container .geom .vertice::before,
            .day-05 .container .geom .vertice::after {
                content: "";
                position: absolute;
            }
            .day-05 .container .geom .vertice-1,
            .day-05 .container .geom .vertice-5 {
                height: 2px;
                left: 166px;
                width: 166px;
            }
            .day-05 .container .geom .vertice-1::before,
            .day-05 .container .geom .vertice-5::before {
                left: -9px;
                top: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-1::after,
            .day-05 .container .geom .vertice-5::after {
                right: -9px;
                top: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-5 {
                bottom: 0;
            }
            .day-05 .container .geom .vertice-6,
            .day-05 .container .geom .vertice-7,
            .day-05 .container .geom .vertice-8 {
                width: 2px;
                left: 0;
                height: 234px;
            }
            .day-05 .container .geom .vertice-6 {
                transform: rotate(-45deg);
                top: 334px;
            }
            .day-05 .container .geom .vertice-8 {
                transform: rotate(-135deg);
                top: 166px;
            }
            .day-05 .container .geom .vertice-2 {
                transform: rotate(135deg);
                top: 166px;
            }
            .day-05 .container .geom .vertice-4 {
                transform: rotate(45deg);
                top: 334px;
            }
            .day-05 .container .geom .vertice-2,
            .day-05 .container .geom .vertice-3,
            .day-05 .container .geom .vertice-4 {
                width: 2px;
                right: 0;
                height: 234px;
            }
            .day-05 .container .geom .vertice-3,
            .day-05 .container .geom .vertice-7 {
                height: 166px;
                top: 166px;
            }
            .day-05 .container .geom .vertice-3::before,
            .day-05 .container .geom .vertice-7::before {
                left: -9px;
                top: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-3::after,
            .day-05 .container .geom .vertice-7::after {
                left: -9px;
                bottom: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-6,
            .day-05 .container .geom .vertice-8,
            .day-05 .container .geom .vertice-2,
            .day-05 .container .geom .vertice-4 {
                transform-origin: 0 0;
            }
            @keyframes appear {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            @keyframes heightSpan {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <div class="day-05">
            <div class="container">
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
            </div>
        </div>
    </body>
</html>

本文由 管理员 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

2 条评论

  1. xxwjgdxgie
    xxwjgdxgie

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com

  2. nxwlzbvkpc
    nxwlzbvkpc

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合 的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com

添加新评论