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. 实现源码参考 ...
随机推荐
- YTU 2559: “心脏出血”
2559: "心脏出血" 时间限制: 1 Sec 内存限制: 128 MB 提交: 5 解决: 2 题目描述 2014年4月,一个开源加密库OpenSSL的严重漏洞" ...
- YTU 2915: Shape系列-1
2915: Shape系列-1 时间限制: 1 Sec 内存限制: 128 MB 提交: 283 解决: 221 题目描述 小强开始迷恋彩色的Shape,于是决定做一个Shape类.Shape类有 ...
- YTU 2912: 圆柱体的C++
2912: 圆柱体的C++ 时间限制: 1 Sec 内存限制: 128 MB 提交: 333 解决: 133 题目描述 小明的弟弟加入的C++兴趣小组,组长布置的第一个任务就是将已有的C程序改写成 ...
- jsp实现翻页功能
jsp实现翻页功能 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给 ...
- sphinx源码分析总结
http://www.cnblogs.com/bonelee/p/6667955.html shinx索引部分源码分析——过程:连接到CSphSource对应的sql数据源,通过fetch row取其 ...
- xcode 8.1 (8B62)真机调试配置
1.点击菜单栏中的Xcode->Preferences->Accounts,如图: 点击上图左下角中的“+”号,登陆一个Apple id(前提已经有了一个apple id账号), 2.然后 ...
- 三.OC基础--1.NSString的创建和使用,2多文件开发,3类方法,4封装
三:OC--1.NSString的创建和使用, 1,创建常量字符串,注意使用“@“符号. NSString *astring = @"This is a String!"; //后 ...
- android:layout_gravity 和 android:gravity 的区别（转载）
转自:http://www.cnblogs.com/ghj1976/archive/2011/04/26/2029535.html gravity 这个英文单词是重心的意思,在这里就表示停靠位置的意思 ...
- mybatis基础学习5---懒加载和缓存
1:懒加载 1)在主配置文件设置(要放在配置文件最前面) 1 <!-- 延迟加载配置,两个都必须同时有 --> <settings> 3 <!-- lazyLoading ...
- CMake学习笔记三：cmake 常用指令
1 基本指令 1,ADD_DEFINITIONS 向 C/C++编译器添加-D 定义,比如: DD_DEFINITIONS(-DENABLE_DEBUG -DABC),参数之间用空格分割. 如果你的代 ...