zoukankan      html  css  js  c++  java
  • 旋转

    <html>

    <head>

        <meta charset="UTF-8">

        <title>旋转</title>

        <style>

        @keyframes spin3 {

            0% {

                transform: rotateY(70deg) rotateX(-30deg) rotateZ(0deg);

            }

            50% {

                transform: rotateY(70deg) rotateX(-30deg) rotateZ(180deg);

            }

            100% {

                transform: rotateY(70deg) rotateX(-30deg) rotateZ(360deg);

            }

        }

        @keyframes colorize {

            50% {

                border-color: magenta;

            }

        }

        #container {

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh;

            100%;

        }

        .circle {

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh;

            100%;

        }

        .circle {

            position: absolute;

            height: 12rem;

            12rem;

            border-radius: 6rem;

            border: .6rem solid cyan;

        }

        .circle:nth-child(1) {

            transform: rotateX(70deg);

            animation: spin1 1s linear infinite, colorize 1.2s linear infinite;

        }

        .circle:nth-child(2) {

            transform: rotateY(70deg) rotateX(30deg);

            animation: spin2 1.2s linear infinite, colorize 1.2s .4s linear infinite;

        }

        .circle:nth-child(3) {

            transform: rotateY(70deg) rotateX(-30deg);

            animation: spin3 .8s linear reverse infinite, colorize 1.2s .8s linear infinite;

        }

        .circle:before,

        .circle:after {

            content: '';

            position: absolute;

            height: 2rem;

            1.5rem;

            border-radius: 50%;

            background: deepskyblue;

            transform: rotateZ(90deg);

        }

        .circle:before {

            margin: -4rem;

        }

        .circle:after {

        }

        @keyframes spin1 {

            0% {

                transform: rotateX(70deg) rotateZ(0deg);

            }

            50% {

                transform: rotateX(70deg) rotateZ(180deg);

            }

            100% {

                transform: rotateX(70deg) rotateZ(360deg);

            }

        }

        @keyframes spin2 {

            0% {

                transform: rotateY(70deg) rotateX(30deg) rotateZ(0deg);

            }

            50% {

                transform: rotateY(70deg) rotateX(30deg) rotateZ(180deg);

            }

            100% {

                transform: rotateY(70deg) rotateX(30deg) rotateZ(360deg);

            }

        }

        </style>

    </head>

    <body>

        <div id="container" style="height: 225px; 288px;">

            <div></div>

            <div></div>

            <div></div>

        </div>

    </body>

    </html>

  • 相关阅读:
    Leetcode Valid Sudoku
    Leetcode Surrounded Regions
    LeetCode Sqrt
    LeetCode POW
    LeetCode Next Permutation
    ACK-Ackermann, 阿克曼函数
    再不懂时序就 OUT 啦!,DBengine 排名第一时序数据库,阿里云数据库 InfluxDB 正式商业化!
    阿里云提供全托管 ZooKeeper
    性能压测中的SLA,你知道吗?
    第一个入驻阿里云自营心选商城,如今它已经是营收过亿的SaaS独角兽
  • 原文地址:https://www.cnblogs.com/alonesky/p/9954122.html
Copyright © 2011-2022 走看看