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. 实现源码参考 ...
随机推荐
- 原创教程之——reactjs 组件入门教程
在学习react之前,希望你有以下准备: react的安装ECMAScript 6基础 本文不讲解react的安装步骤,若需了解请移步官方网站(https://reactjs.org/),那里讲解非常 ...
- [IMX6DL][Android4.4] 电池低电量告警提示【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/51789964 之前版本的电池电量低是通过发送 intent ACTION_BATTERY_L ...
- I.MX6 简单电路模拟USB设备的插入
/**************************************************************************** * I.MX6 简单电路模拟USB设备的插入 ...
- CSYZDay2模拟题解
T1.rotate [问题描述] ZYL有N张牌编号分别为1, 2,……,N.他把这N张牌打乱排成一排,然后他要做一次旋转使得旋转后固定点尽可能多.如果第i个位置的牌的编号为i,我们就称之为固定点.旋 ...
- linux 服务器 vim编辑器打开php文件出现中文乱码
进入服务器目录 [root@VM_139_218_centos /]# cd ~ [root@VM_139_218_centos ~]# vim .vimrc 在 .vimrc 文件中写入以下代码: ...
- shiro之jdbcRealm
Shiro认证过程 创建SecurityManager--->主体提交认证--->SecurityManager认证--->Authenticsto认证--->Realm验证 ...
- hihoOffer收割练习20题目1
题目1 : 无根数变有根树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一棵包含 N 个节点的无根树,小Hi想知道如果指定其中某个节点 K 为根,那么每个节点的父 ...
- Android 线程池系列教程(3) 创建线程池
Creating a Manager for Multiple Threads 上一课 下一课 1.This lesson teaches you to Define the Thread Pool ...
- CentOS 6.5使用：[3]使用xftp传递文件
先检查CentOS系统是否安装了FTP服务 [root@centos ~]# rpm -qa | grep vsftpd 如果有内容输出,那么恭喜你,你的系统已经安装了ftp服务 如果没有那么按照 ...
- SpringCloud开发学习总结（五）—— 服务容错保护Hystrix
在微服务架构中,我们将系统拆分成了很多服务单元,各单元的应用间通过服务注册与订阅的方式相互依赖.但由于每个单元都在不同的进程中运行,一来通过远程调用的方式执行,这样就有可能因为网络原因或是依赖服务自身 ...