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>
  • 相关阅读:
    图灵访谈之三十二:我的精神家园——陈皓专访
    对程序员职业的一些建议
    小波学习之一(单层一维离散小波变换DWT的Mallat算法C++和MATLAB实现)
    你是码农涅,还是创造者涅(内容是转载的,标题是我写的)
    小波学习之三(多孔算法与MATLAB swt剖析)—2013.5.27有更新
    【小波变换】STL版 一维离散小波变换(DWT)库,完全按matlab的wavelet toolbox 的API实现的
    从钱龙数据中读取股票权息信息导入到数据库
    从钱龙数据中读取股票交易数据(日线)导入到数据库
    从钱龙数据中读取股票代码信息导入到数据库
    汉典速查: 一个简易的国学阅读工具
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/11457352.html
Copyright © 2011-2022 走看看