<!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. 纯CSS实现带小三角提示框

    要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...

  2. 红日安全vulnstack (一)

    网络拓扑图 靶机参考文章 CS/MSF派发shell 环境搭建 IP搭建教程 本机双网卡 65网段和83网段是自己本机电脑(虚拟机)中的网卡, 靶机外网的IP需要借助我们这两个网段之一出网 Kali ...

  3. 第 7章 Python 爬虫框架 Scrapy(上)

    第 7章 Python 爬虫框架 Scrapy(上) 编写爬虫可以看成行军打仗,基本的角色有两个:士兵和将军,士兵冲锋陷阵,而将军更多地是调兵遣将.框架就像一个将军,里面包含了爬虫的全部流程.异常处理 ...

  4. PeLK:101 x 101 的超大卷积网络,同参数量下反超 ViT | CVPR 2024

    最近,有一些大型内核卷积网络的研究,但考虑到卷积的平方复杂度,扩大内核会带来大量的参数,继而引发严重的优化问题.受人类视觉的启发,论文提出了外围卷积,通过参数共享将卷积的复杂性从 \(O(K^{2}) ...

  5. ARMS实践|日志在可观测场景下的应用

    简介: 在实际生产中,通过灵活组合文内几种使用方式,运维团队可以很好地排除日常观测.故障定位过程中的干扰因素,更快的定界甚至定位问题根因. 作者:陈陈   日志在可观测场景下的应用   随着 IT 架 ...

  6. 融合数据库生态:利用 EventBridge 构建 CDC 应用

    简介: 近期,EventBridge 事件流已经支持了基于阿里云 DTS服务的 CDC 能力.本文将从 CDC.CDC 在 EventBridge 上的应用以及若干最佳实践场景等方面,为大家介绍如何利 ...

  7. 兑现 Service Mesh 的新价值:精确控制“爆炸半径”

    ​简介:本文分享了阿里云内部所沉淀的全链路流量打标与路由的能力,做出服务网格技术新体验的同时,很好地兑现了服务网格的新价值. 作者:至简 软件是以持续迭代的方式去不断演进的.某种程度上,我们并不担心软 ...

  8. Dubbo-go 优雅上下线设计与实践

    ​简介:在分布式场景下,微服务进程都是以容器的形式存在,在容器调度系统例如 k8s 的支持下运行,容器组 Pod 是 K8S 的最小资源单位.随着服务的迭代和更新,当新版本上线后,需要针对线上正在运行 ...

  9. 划重点|iOS15正式发布, 全新的通知推送系统,你必须要知道!

    ​简介: 今年友盟+联合达摩院决策智能实验室讲算法技术,推出国内首个智能推送功能,帮助产品运营人员实现一键式触达的精细化运营.通过精心打磨的在线学习与优化算法,对推送人群与推送文案进行精准匹配,最大化 ...

  10. WPF 界面打不开提示 System.ArithmeticException Overflow or underflow in the arithmetic operation 异常

    本文告诉大家如何解决界面打不开,抛出 System.ArithmeticException: Overflow or underflow in the arithmetic operation 异常的 ...