<!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. 力扣189(java)-轮转数组（中等）

    题目: 给你一个数组,将数组中的元素向右轮转 k 个位置,其中 k 是非负数. 示例 1: 输入: nums = [1,2,3,4,5,6,7], k = 3输出: [5,6,7,1,2,3,4]解释 ...

  2. 阿里云2020上云采购季，你的ECS买好了吗？

    阿里云2020上云采购季,超级品类日,天天有爆款. 今日爆款推荐:云服务器. 重磅推荐两款,限时抢购. 新品共享型s6: 企业级共享型n4: 想看更多云产品,来阿里云采购季: https://www. ...

  3. 云原生消息队列Pulsar浅析

    简介: 云原生消息队列Pulsar浅析 一.前言 Pulsar是一个多租户,高性能的服务间消息解决方案.最初由Yahoo开发,现在由Apache Software Foundation负责.Pulsa ...

  4. 六年团队Leader实战秘诀｜程序员最重要的八种软技能

    ​简介:笔者在带团队的六年中发现,程序员们在职场都有一个共同的困扰:"好像写代码都没什么问题了,日常工作基本上都是应付业务需求的开发,好像找不到其他的更大的附加价值了,我应该找一些什么样的发 ...

  5. RocketMQ 端云一体化设计与实践

    简介:本文首先介绍了端云消息场景一体化的背景,然后重点分析了终端消息场景特点,以及终端消息场景支撑模型,最后对架构和存储内核进行了阐述.我们期望基于 RocketMQ 统一内核一体化支持终端和服务端不 ...

  6. KubeVela v1.2 发布：你要的图形化操作控制台 VelaUX 终于来了！

    ​简介:时间来到 2022 年,KubeVela 也正式进入了第四个阶段,在原先核心控制器 API 基本稳定的基础上,我们以插件的形式增加了一系列开箱即用的功能.让开发者可以通过 UI 控制台的方式, ...

  7. vue使用promise.all异步实现多个请求完成之后在执行某些操作

    使用场景:多个请求方法拿到数据之后需要对这不同的数据进行比较,之后在输出并渲染 思路:使用promise.all()异步操作: Promise.all([ //上架 new Promise((reso ...

  8. Util 应用框架 UI 全新升级

    Util UI 已经开发多年, 并在多家公司的项目使用. 不过一直以来, Util UI 存在一些缺陷, 始终未能解决. 最近几个月, Util 团队下定决心, 终于彻底解决了所有已知缺陷. Util ...

  9. Halo博客搭建小记

    准备工作 阿里云服务器,操作系统为CentOS 7.9.2009 x86_64(Py3.7.9) 宝塔面板 Nginx 1.24.0(用于反向代理) 已备案的域名 ssl证书(https访问) 参考官 ...

  10. Django高级表单处理与验证实战

    title: Django高级表单处理与验证实战 date: 2024/5/6 20:47:15 updated: 2024/5/6 20:47:15 categories: 后端开发 tags: D ...