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>

  • 相关阅读:
    UWP中实现大爆炸效果(二)
    UWP中实现大爆炸效果(一)
    c# 【电影搜索引擎】采集电影站源码
    安利一个聚合搜索导航站,及怎么样设置成默认的搜索引擎
    女朋友经常问影视剧, 答不上来怎么办?
    宝塔linux面板, 服务器日志分析与流量统计这款插件的mysql版优化。
    苹果cms自动采集,重复执行遇到“上次执行时间: --跳过”的解决办法
    苹果cms, 后台设置保存不了的解决办法
    解决 C:WINDOWSsystem32inetsrv ewrite.dll 未能加载。返回的数据为错误.
    img error 图片加载失败的最佳方案
  • 原文地址:https://www.cnblogs.com/alonesky/p/9954122.html
Copyright © 2011-2022 走看看