CSS3 自动旋转

<!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 自动旋转的更多相关文章

CSS3——3D旋转图（跑马灯效果图）
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
【微信支付】分享一个失败的案例跨域405(Method Not Allowed)问题关于IM的一些思考与实践基于WebSocketSharp 的IM 简单实现【css3】旋转倒计时【Html5】-- 塔台管制 H5情景意识 --飞机谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
IOS6屏幕旋转详解（自动旋转、手动旋转、兼容IOS6之前系统）
转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...
CSS3实现旋转的太极图（二）：只用1个DIV
效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...
CSS3绘制旋转的太极图案（一）
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
iOS系统自带的 UIAlertView 自动旋转的实现
这里主要解析 UIAlertView 的几个关键功能的实现: 随着设备屏幕的旋转而旋转: Alert弹出框,使用UIWindow来实现,就是说,不用依赖于当前显示在最前面的UIView. 实现源码参考 ...

随机推荐

提高 Linux 上 socket 性能加速网络应用程序的 4 种方法
使用 Sockets API,我们可以开发客户机和服务器应用程序,它们可以在本地网络上进行通信,也可以通过 Internet 在全球范围内进行通信.与其他 API 一样,您可以通过一些方法使用 Soc ...
gsm model二次开发C#短信猫开发/长短信
加QQ:83014588 向我索要,开发包开发人员淘宝:http://t.cn/RhOj8W8 短信猫:http://item.taobao.com/item.htm?spm=686.1000925 ...
YTU 2844: 改错题A-看电影
2844: 改错题A-看电影时间限制: 1 Sec 内存限制: 128 MB 提交: 69 解决: 47 题目描述注:本题只需要提交标记为修改部分之间的代码,请按照C++方式提交. 小平家长为 ...
并不对劲的trie树
听上去像是破坏植物的暴力行为(并不). 可以快速查询某个字符串在某个字符串集中出现了几次,而且听上去比字符串哈希靠谱. 把整个字符串集建成树,边权是字符,对于字符串结尾的节点进行特殊标记. 这样一方面 ...
小程序-demo：天气预报
ylbtech-小程序-demo:天气预报 1.返回顶部 1.app.js //app.js App({ //系统事件 onLaunch: function () {//小程序初始化事件 var th ...
Android buffer_handle_t的定义（转载）
转自:http://www.cnblogs.com/eustoma/archive/2012/06/08/2541416.html 1. buffer_handle_t 文件位置:system\cor ...
E20170518-hm
inherit inherit v. 继承; inheritance n. 继承; 遗传; 遗产; eigen [词典] 特征的,本征; single n. 单程票单人房间; [复数] (高尔夫球 ...
洛谷 P1941 飞扬的小鸟【dp】
设f[i][j]为在坐标(i,j)时的最小点击次数,转移的话从i-1向上飞或者向下掉转移,注意转移完了之后要把管子部分赋值为inf #include<iostream> #include& ...
Poj 3264 Balanced Lineup RMQ模板
题目链接: Poj 3264 Balanced Lineup 题目描述: 给出一个n个数的序列,有q个查询,每次查询区间[l, r]内的最大值与最小值的绝对值. 解题思路: 很模板的RMQ模板题,在这 ...
bzoj1415 [Noi2005]聪聪和可可【概率dp 数学期望】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1415 noip2016 D1T3,多么痛的领悟...看来要恶补一下与期望相关的东西了. 这是 ...

CSS3 自动旋转

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

随机推荐

热门专题