<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            background:url(./images/2.jpg) no-repeat;
            /* 控制背景图大小 */
            background-size:100% 100%;
        }
        img{
            display:block;
        }
        .fixed_center{
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
        }
        /* 支架 */
        .bracket{
            margin:auto auto 0;
        }
        /* 轮子 */
        .img1{
            animation:imgRotate 20s linear infinite;
        }
        /* 放小人的盒子 */
        .picBox{
            width:768px;
            height:768px;
            animation:imgRotate 20s linear infinite;
        }
        .picBox img{
            position: absolute;
            /* 小人的图片也转动  反向的旋转 */
            animation:imgRotate 20s linear infinite reverse;
            /* 改变圆心点的位置 */
            transform-origin:center 10px;
        }
        .pic1{
            left: 43%;
            top: 4%;
        }
        .pic2{
            left: 43%;
            bottom: -13%;
        }
        .pic3{
            left: -1%;
            top: 45%;
        }
        .pic4{
            right: -1%;
            top: 45%;
        }
        /* 关键帧 */
        @keyframes imgRotate {
            0%{
                transform:rotate(0);
            }
            100%{
                transform:rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 支架 -->
    <img class="fixed_center bracket" src="./images/bracket.png" alt="">
    <img class="fixed_center bracket" src="./images/bracketsmall.png" alt="">
    <img class="fixed_center img1" src="./images/fsw.png" alt="">
    <div class="fixed_center picBox">
        <img class="pic1" src="./images/boy.png" alt="">
        <img class="pic2" src="./images/girl.png" alt="">
        <img class="pic3" src="./images/girls.png" alt="">
        <img class="pic4" src="./images/mimi.png" alt="">
    </div>
    <!-- logo -->
    <img class="fixed_center" src="./images/big-title.png" alt="">
</body>
</html>

css摩天轮的更多相关文章

  1. UESTC_摩天轮 2015 UESTC Training for Dynamic Programming<Problem K>

    K - 摩天轮 Time Limit: 10000/4000MS (Java/Others)     Memory Limit: 262143/262143KB (Java/Others) Submi ...

  2. CDOJ 879 摩天轮 dp+斜率优化

    原题链接:http://www.acm.uestc.edu.cn/#/problem/show/879 题意: 中文题 题解: 这是一道斜率dp的题. 先把$a$数组排个序. 令$dp[i][j]$表 ...

  3. Android学习笔记之如何使用圆形菜单实现旋转效果...

    PS:最近忙于项目的开发,一直都没有去写博客,是时候整理整理自己在其中学到的东西了... 学习内容: 1.使用圆形菜单并实现旋转效果..     Android的圆形菜单我也是最近才接触到,由于在界面 ...

  4. Spring学习(五)--构建Spring Web应用程序

    一.Spring MVC起步 看过猫和老鼠的小伙伴都可以想象Tom猫所制作的捕鼠器:它的目标 是发送一个小钢球,让它经过一系列稀奇古怪的装置,最后触发捕鼠 器.小钢球穿过各种复杂的配件,从一个斜坡上滚 ...

  5. 2014 UESTC暑前集训动态规划专题解题报告

    A.爱管闲事 http://www.cnblogs.com/whatbeg/p/3762733.html B.轻音乐同好会 C.温泉旅馆 http://www.cnblogs.com/whatbeg/ ...

  6. ansj 2.0.7 错误例子分析

    我在做一个solr的项目,分词选定了ansj分词. 选择ansj的原因: 1)身边若干朋友的念叨,说是效果不错 2)网上看了若干评论,说是不错 3)自己尝试了一些case,觉得确实不错. 好了,项目中 ...

  7. Kerberos原理

    前些日子为了搞清楚Kerberos原理,把MIT的Kerberos经典对话看了几遍,终于有了一个稍微清晰的认识,这里稍微记录下,因为Kerberos是使用传统加密技术实现的一个认证机制,所以顺便备忘下 ...

  8. English常用短语

    (1) be waken  by    被什么吵醒 (2) wake up !           快醒醒 (3)  put the flames    /fleimz/               ...

  9. 设计模式之访问者模式（Visitor ）

    访问者模式是一种将数据操作和数据结构分离的设计模式,可以说是面向数据密集型的一种设计方式,数据的结构相对稳定,有明显的分层和分类,而对数据对象的相关操作进行分组.分析等二次加工,这些操作都是由访问者来 ...

  10. 无线端安全登录与鉴权一之Kerberos

    无线端登录与鉴权是安全登录以及保证用户数据安全的第一步,也是最重要的一步.之前做过一个安全登录与鉴权的方案,借这个机会,系统的思考一下,与大家交流交流 先介绍一下TX系统使用的Kerberos方案,参 ...

随机推荐

  1. 19_非单文件名组件中VueComponent构造函数&重要的内置关系

    总结: 关于VueComponent:     1.school组件本质上是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的.     2.我们只需要写&l ...

  2. 云服务器ECS共享标准型S6全新发布，行业内最具性价比

    近日,阿里云弹性计算发布全新一代云服务ECS共享标准型S6,性能相对上一代实例提升15%以上,价格相对上一代最高降低42%,是目前国内云计算厂商更能够提供的最具性价比的云服务器产品.一些中小型网站.轻 ...

  3. Java应用结构规范

    ​简介:在Java程序开发中,命名和应用分层无疑是广大后端同胞的两大"痛点",本文提供一种基于领域模型的轻量级应用分层结构设计,供大家参考.下面按分层结构.分层明细.调用关系.各层 ...

  4. [Docker] 使 Volume 独立于容器运行时的方式 - 让容器引擎去处理

    在单纯使用 run 命令运行一个容器时,通常会使用 -v 挂载的方式来实现宿主机数据卷映射到容器内. 使用命令: $ docker run --name mysql-con -v /my/custom ...

  5. WPF 解决 ObservableCollection 提示 Cannot change ObservableCollection during a CollectionChanged event 异常

    本文告诉大家在使用 ObservableCollection 时,抛出 InvalidOperationException 异常,提示 Cannot change ObservableCollecti ...

  6. dotnet 使用 Newtonsoft.Json 输出枚举首字符小写

    本文告诉大家如何使用 Newtonsoft.Json 输出枚举首字符小写 实现方法是加上 JsonConverterAttribute 特性,传入 StringEnumConverter 转换器,再加 ...

  7. QT Creator 远程调试 QT 程序

    一.测试环境 QT Creator 版本:5.12.9 开发板:rv1126 开发环境:ubuntu20.04 开发板内核:4.19 二.配置 ARM 交叉编译器 ARM 交叉编译工具,购买开发板时, ...

  8. VGA色块显示#VGA显示数字

    VGA驱动色块显示 了解了VGA的显示原理和ADV7123控制后,再去实现色块显示就容易了. 像素坐标 跟显示色条不同,要在屏幕上不同的地方显示色块,需要用像素坐标来定位色块.其实,就是分别用行扫描的 ...

  9. 使用 @NoRepositoryBean 简化数据库访问

    在 Spring Data JPA 应用程序中管理跨多个存储库接口的数据库访问逻辑可能会变得乏味且容易出错.开发人员经常发现自己为常见查询和方法重复代码,从而导致维护挑战和代码冗余.幸运的是,Spri ...

  10. .NET开源、功能强大、跨平台的图表库 - LiveCharts2

    前言 今天大姚给大家分享一个.NET开源(MIT License).功能强大.简单.灵活.跨平台的图表.地图和仪表库:LiveCharts2.   项目介绍 LiveCharts2是一个.NET开源. ...