<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>CSS3自动旋转效果</title>

        <style>

          .swiper-container{

            width:100%;

            margin:300px auto;

            position:relative;

          }

          .swip_center_img{

            -moz-animation:rotate 20s infinite linear;

            -webkit-animation:rotate 20s infinite linear;

            animation:rotate 20s infinite linear;

            position:absolute;

            left:50%;

            top:50%;

          }

          .center_img{

            background:rgba(120,220,210,.7);

          }

          .swip_img_radius{

            padding:10px;

            width:100px;

            height:100px;

            border-radius:50%;

            box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;

            -moz-transition:all .5s;

            -webkit-transition:all .5s;

            transition:all .5s;

          }

          @-moz-keyframes rotate{

            0%{

              -moz-transform:rotate(0deg);

             }

             100%{

               -moz-transform:rotate(360deg);

             }

          }

          @-webkit-keyframes rotate{

            0%{

              -webkit-transform:rotate(0deg);

             }

             100%{

               -webkit-transform:rotate(360deg);

             }

          }

          @keyframes rotate{

            0%{

              transform:rotate(0deg);

             }

             100%{

               transform:rotate(360deg);

             }

          }

          .translate_right_top{

            background:rgba(23,43,45,.7);

            -moz-transform:translate(140px,-140px);

            -webkit-transform:translate(140px,-140px);

            transform:translate(140px,-140px);

          }

          .translate_right{

            background:rgba(123,43,45,.7);

            -moz-transform:translate(170px);

            -webkit-transform:translate(170px);

            transform:translate(170px);

          }

          .translate_right_bottom{

            background:rgba(123,73,55,.7);

            -moz-transform:translate(140px,140px);

            -webkit-transform:translate(140px,140px);

            transform:translate(140px,140px);

          }

          .translate_bottom{

            background:rgba(53,173,55,.7);

            -moz-transform:translate(0,170px);

            -webkit-transform:translate(0,170px);

            transform:translate(0,170px);

          }

          .translate_left_bottom{

            background:rgba(53,173,155,.7);

            -moz-transform:translate(-140px,140px);

            -webkit-transform:translate(-140px,140px);

            transform:translate(-140px,140px);

          }

          .translate_left{

            background:rgba(153,173,55,.7);

            -moz-transform:translate(-170px);

            -webkit-transform:translate(-170px);

            transform:translate(-170px);

          }

          .translate_left_top{

            background:rgba(53,273,55,.7);

            -moz-transform:translate(-140px,-140px);

            -webkit-transform:translate(-140px,-140px);

            transform:translate(-140px,-140px);

          }

          .translate_top{

             background:rgba(53,173,255,.7);

            -moz-transform:translate(0,-170px);

            -webkit-transform:translate(0,-170px);

            transform:translate(0,-170px);

          }

        </style>

  </head>

  <body>

      <header class="swiper-container">

        <div class="swip_center_img">

          <div class="swip_img_radius center_img"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_right_top"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_right"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_right_bottom"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_bottom"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_left_bottom"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_left"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_left_top"></div>

        </div>

        <div class="swip_center_img">

          <div class="swip_img_radius translate_top"></div>

        </div>

      </header>

<script src="scripts/jquery-1.7.1.min.js"></script>

    <script>

      $(document).ready(function(){

        $(".swiper-container").css("height",$(window).height());

      });

    </script>

  </body>

</html>

CSS3 自动旋转的更多相关文章

  1. CSS3——3D旋转图（跑马灯效果图）

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  2. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  3. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  4. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  5. IOS6屏幕旋转详解（自动旋转、手动旋转、兼容IOS6之前系统）

    转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...

  6. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  7. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  8. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  9. iOS系统自带的 UIAlertView 自动旋转的实现

    这里主要解析 UIAlertView 的几个关键功能的实现: 随着设备屏幕的旋转而旋转: Alert弹出框,使用UIWindow来实现,就是说,不用依赖于当前显示在最前面的UIView. 实现源码参考 ...

随机推荐

  1. （转载）synchronized代码块

    原文:http://blog.csdn.net/luoweifu/article/details/46613015 作者:luoweifu 转载请标名出处 <编程思想之多线程与多进程(1)——以 ...

  2. 【转】Android性能优化-过度绘制解决方案

    转载请注明出处:http://blog.csdn.net/a740169405/article/details/53896497 过度绘制: 屏幕上某一像素点在一帧中被重复绘制多次,就是过度绘制. 下 ...

  3. ThreadLocal工具类的使用（隔离思想）

    ThreadLocal不是用来解决共享对象的多线程访问问题的, 通过ThreadLocal的set()方法设置到线程的ThreadLocal.ThreadLocalMap里的是是线程自己要存储的对象, ...

  4. 修改 Appdelegate 文件名为添加项目前缀的方法

    本文假设你的项目是 Test, 那么为了给你的 Appdelegate 文件保持按照项目名为前缀 ,就需要对 Appdelegate 文件进行修改前缀名. 技巧分享:将开发中的 Appdelegate ...

  5. [软件安装]MYSQL

    https://dev.mysql.com/downloads/repo/yum/ wget https://repo.mysql.com//mysql57-community-release-el7 ...

  6. 洛谷P4315 月下“毛景树”（树剖+线段树）

    传送门 woc这该死的码农题…… 把每一条边转化为它连接的两点中深度较深的那一个,然后就可以用树剖+线段树对路径进行修改了 然后顺便注意在上面这种转化之后,树剖的时候不能搞$LCA$ 然后是几个注意点 ...

  7. 只需3步，即可将你的Chromium Edge 浏览器设置成中文

    最近,Chromium Edge 浏览器推出了添加语言包的功能,于是我们可以轻松将其界面设置成中文的. 第1步: 升级浏览器到最新版 在Chromium Edge 浏览器的地址栏中输入: edge:/ ...

  8. 采购发票检验MIRO差异科目设置

    采购订单发票检验时,最终的金额可能跟采购订单的价格不一样,对于这部分差异,系统提供了后台配置科目的方式. 配置科目可通过OBYC,在BSX存货差异配置相关评估类型对应科目. 当库存商品少于采购订单数量 ...

  9. Elasticsearch 2.3.2 安装部署

    先按照http://blog.csdn.net/love13135816/article/details/51690280这个教程安装, 不过后面的IK分词器安装部分有问题. 所以中文分词器插件的安装 ...

  10. shiro错误：Subject does not have permission [user:select]

    使用的是jdbcRealm,在数据库中有相应的权限 错误日志: org.apache.shiro.authz.UnauthorizedException: Subject does not have ...