<!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. easyx的使用，鼠标交互（3.0）

    本文从B站学习,借鉴: 学习视频地址:鼠标操作(旧版)_哔哩哔哩_bilibili

  2. 力扣304(java)-二维区域和检索-矩阵不可变（中等）

    题目: 给定一个二维矩阵 matrix,以下类型的多个请求: 计算其子矩形范围内元素的总和,该子矩阵的 左上角 为 (row1, col1) ,右下角 为 (row2, col2) .实现 NumMa ...

  3. App隐私合规“免费”自动化检测

    简介: App隐私合规检测提供了全面的隐私合规检测报告和专家建议,从确保形式合规(隐私政策文本合规性)及实质合规(代码层合规性)的一致性,从个人信息收集.权限使用场景.超范围采集.隐私政策.三方SDK ...

  4. 阿里云安全运营中心：DDoS攻击趁虚而入，通过代理攻击已成常态

    应用层DDoS攻击与传统的DDoS攻击有着很大不同.传统的DDoS攻击通过向攻击目标发起大流量并发式访问造成服务不可用,系统瘫痪,这种方式比较容易被识破,且市场上已经有成熟的应对方案.而近年来兴起的应 ...

  5. 使用 Data Assistant 快速创建测试数据集

    使用 Data Assistant 快速创建测试数据集 Data Assistant 提供超过 100 种数据类型,为任何开发.测试或演示目的生成大量.异构.真实的数据. 官网地址:http://ww ...

  6. UCenter 1.6 数据字典

    uc_admins 管理员权限表 字段名 数据类型 默认值 允许非空 自动递增 备注 uid mediumint(8) unsigned   NO 是 用户ID username char(15)   ...

  7. Photoshop批量替换图层的方法

    平时做图片,应该有遇到这样的场景,比如P奖状.P邀请函,内容是一样的,但是图片上的名字是不一样的,要是要P100张的话,一个个手动复制改名字肯定会吐血(╯°□°)╯︵ ┻━┻ Photoshop里有个 ...

  8. ChatGPT开源项目精选合集

    大家好,我是 Java陈序员. 2023年,ChatGPT 的爆火无疑是最值得关注的事件之一,AI对话.AI绘图等工具层出不穷. 今天给大家介绍几个 ChatGPT 的开源项目! 关注微信公众号:[J ...

  9. All in One：Prometheus 多实例数据统一管理最佳实践

    01 引言 Prometheus 作为目前最主流的可观测开源项目之一,已经成为云原生监控的事实标准,被众多企业广泛应用.在使用 Prometheus 的时候,我们经常会遇到全局视图的需求,但是数据确分 ...

  10. blazor中的PageTitle输出keywords和description，自定义组件

    在blazor的PageTitle中不具备输出keywords和description的功能,而如果直接使用<mate>标签,输出中文时会变成乱码,所以我给大家推介下面的代码解君愁: 1 ...