<!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. CSS3圆圈动画放大缩小循环动画效果

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  3. 关于CSS的图像放大问题的解决，需要借助jQuery等直接用css3设置

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  4. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  5. 模仿某旅行网站 纯css实现背景放大效果

    基本功能是鼠标移动到图片上,对应宽度变宽.其中布局和基本样式直接copy官网,功能部分是自己瞎鼓捣实现的. 直接上代码: HTML部分 <div class="fold_wrap&qu ...

  6. 纯CSS实现内容放大缩小效果

    先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...

  7. css scale 元素放大缩小效果

    <style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...

  8. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  9. CSS实现放大镜/狙击镜效果

    图片放大,这是一个比较容易的效果了.当然,今天说的可不是简简单单的在一个框里放大,而是一个圆.就像放大镜或是狙击镜那样,只有圆圈里的放大,圈外的当然还是原来的图片.这是不是很不可思议? 当然不是.做过 ...

  10. 「CSS」css基础

    1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值 ...

随机推荐

  1. Chat2table，简易表格分析助手

    一 写在前面 之前用智谱AI的Chatglm3-6b模型写过一个简单的论文阅读助手,可用来辅助论文阅读等.而像表格,如Excel.CSV文件等内容的分析,也是不可忽略的需要,因此本文同样使用Chatg ...

  2. 如何实现数据库数据到Abp vnext实体对象的同步？以及代码生成工具

    在采用了EF Core的Code First方式下,如果你在数据库中直接添加了新表或存储过程,你需要在项目代码中手动反向工程这些数据库的更改,以保持Code First的代码与数据库同步.这种情况可以 ...

  3. JavaScript中数值小知识

    1. 数值10.0 这种类似的会被去掉数值后的0 之所以这样是因为,整数的存储空间占用比浮点数小,当一个数值不是真浮点数(即10.0这种格式),会被转换为整数10,如果业务中有一些需求需要进行数值位数 ...

  4. CF1995E Long Inversions(贪心 + 差分)

    见代码 点击查看代码 //背景:夸一下自己,CF1955A~E均是自己想出来的,这道题思路是自己想的,唯一没想到用差分数组维护 //原理:贪心(想最左边的1开始,不可能对其左边包括自己操作了,否则又要 ...

  5. 【Oracle】使用exit,return,continue跳出循环

    [Oracle]使用exit,return,continue跳出循环 exit是结束循环,但还会继续执行程序包中其他的内容 return则是直接中断整个程序 continue的作用是终止本次循环,开始 ...

  6. DNS高可用设计--软件高可用

    DNS是网络的基础服务,网络上的各种应用对DNS的依赖性很高.DNS的稳定,直接决定了上层应用服务的稳定.那如何保障DNS服务的高可用呢?我们先来看下高可用的概念: 高可用 高可用(High avai ...

  7. CNCF 沙箱项目 OCM Placement 多集群调度指南

    ​简介:在这篇文章中,将介绍 Placement 如何选择到所需的集群,Placement 可以提供的调度功能,以及一些场景下的最佳实践,使用者可以参考示例来编写符合自己要求的 Placement.其 ...

  8. dotnet 在析构函数调用 ThreadLocal 也许会抛出对方已释放

    我在不自量力做一个数组池,就是为了减少使用 System.Buffers.dll 程序集,然而在数组池里面,所用的 ThreadLocal 类型,在我对象析构函数进行归还数组时,抛出了无法访问已释放对 ...

  9. WPF 笔迹触摸点收集工具

    本文来安利大家一个工具,可以用来收集笔迹的触摸点,这个工具完全开源 在开始之前先看一下工具的界面 实现方式其实就在触摸的时候收集触摸点信息,上面的工具有很多功能都没有实现的.笔迹绘制的功能使用 WPF ...

  10. RT-Thread 运行时常见错误

    一.空线程栈较小 现象: 现象一: 现象二: 原因: 从RT-Thread文章中心可知,空闲线程是不能被挂起的,官方文档说明如下图所示: 注意:必须保证空闲线程的栈空间足够,否则空闲线程内存溢出后,也 ...