zoukankan      html  css  js  c++  java
  • 风云中的转盘

    <!DOCTYPE html>
    <html>

    <head>
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <style>
    * {
    padding: 0;
    margin: 0
    }

    .mobileItem {
    animation-duration: 3s;
    animation-delay: .2s;
    animation-iteration-count: infinite;
    }

    #change {
    600px;
    height: 600px;
    border-radius: 100%;
    background: url("./ab.png") no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -300px;
    z-index: 1;
    -webkit-animation: change 20s linear infinite;
    }

    #change2 {
    520px;
    height: 520px;
    border-radius: 100%;
    background: url("./ab.png") no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -260px;
    margin-top: -260px;
    z-index: 2;
    -webkit-animation: change1 23s linear infinite;
    }
    #change3 {
    440px;
    height: 440px;
    border-radius: 100%;
    background: url("./ab.png") no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -220px;
    margin-top: -220px;
    z-index: 2;
    -webkit-animation: change 13s linear infinite;
    }
    #change4 {
    360px;
    height: 360px;
    border-radius: 100%;
    background: url("./ab.png") no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -180px;
    margin-top: -180px;
    z-index: 2;
    -webkit-animation: change1 11s linear infinite;
    }
    #change5 {
    360px;
    height: 360px;
    border-radius: 100%;
    text-align: center;
    line-height: 360px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -180px;
    margin-top: -180px;
    z-index: 2;
     
    }

    .con {
    600px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -300px;
     

    }

    @-webkit-keyframes change {

    0% {
    -webkit-transform: rotate(0deg);
    }

    50% {
    -webkit-transform: rotate(180deg);
    }

    100% {
    -webkit-transform: rotate(360deg);
    }

    }

    @-webkit-keyframes change1 {

    0% {
    -webkit-transform: rotate(360deg);
    }

    50% {
    -webkit-transform: rotate(180deg);
    }

    100% {
    -webkit-transform: rotate(0deg);
    }

    }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <script>
    // function resizing() {
    // var num = window.innerWidth;
    // var font = num / 10;
    // document.getElementsByTagName('html')[0].style.fontSize = font + 'px'
    // }
    // resizing();
    // window.onresize = function () {
    // resizing()
    // }
    </script>
    </head>

    <body>

    <div class="con">
    <div id="change"></div>
    <div id="change2"></div>
    <div id="change3"></div>
    <div id="change4"></div>
    <div id="change5">行业拓展部</div>
     
    </div>


    </body>

    </html>
  • 相关阅读:
    Squid-Squid 多层Cache 如何设置实现墙内直连,墙外域名走国外Proxy
    利用win2008虚拟化hyper-v 和squid反向代理,自己做个IDC
    再次分享 pyspider 爬虫框架
    刘宇:我如何5分钟拿到李书福的投资?
    刘宇:2014年投资感悟
    刘宇(正和磁系资本创始人)_百度百科
    python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客
    采集爬虫中,解决网站限制IP的问题?
    Web 应用性能和压力测试工具 Gor
    dnspod-sr内网轻量级DNS首选方案
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/11457352.html
Copyright © 2011-2022 走看看