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. 实现源码参考 ...
随机推荐
- 省市区三级-javabean和mybatis
bean: package com.baiwang.moirai.model.sys; import com.fasterxml.jackson.annotation.JsonInclude; /** ...
- 关于数论【polya计数法】
可以预见数论推公式是有多么蛋疼. 让我简明扼要的讲讲吧(多都说不出来,毕竟才做了两道题)其实呢,这个算法应该归入群论,有个有用的东西:置换群,它表示一个集合包括很多的置换.先讲讲置换吧:↓(这是个置换 ...
- YTU 2891: E--围栏
2891: E--围栏 时间限制: 1 Sec 内存限制: 128 MB 提交: 91 解决: 24 题目描述 一串连续字符被称作围栏当且仅当它由间隔的'|'和'-'组成.比如"|-|- ...
- Mac 中安装 Apache Ant
1.下载Apache Ant:http://ant.apache.org/bindownload.cgi 2.解压apache-ant-1.9.6-bin.zip,把解压好的apache-ant-1. ...
- 【OpenFOAM】——OpenFOAM入门算例学习
1 明确目标——为啥费老大劲儿学习OpenFOAM 学习OpenFOAM主要出于课题需要,希望实现以下几个目标: l [ ]学会用SnappyHexMesh生成高质量网格: l [ ]学习使用O ...
- js读取ognl表达式的内容
<input type="hidden" id="number" value='<s:property value="resultN ...
- pytest单侧模块_入门汇总
Pytest简单介绍 (pytest是python的一个测试框架,主要是用来进行一些小的测试) 安装:pip install -U pytest 查看是否安装成功:pytest --version 运 ...
- springMVC RedirectAttributes
@Controller public class TestController { @RequestMapping("/redirectDemo") public String r ...
- 【数据结构(C语言版)系列一】 线性表
最近开始看数据结构,该系列笔记简单记录总结下所学的知识,更详细的推荐博主StrayedKing的数据结构系列,笔记部分也摘抄了博主总结的比较好的内容. 一些基本概念和术语 数据是对客观事物的符号表示, ...
- QT5每日一学(一)下载与安装
一.Qt SDK的下载和安装 1.下载 Qt官网主页提供了最新版Qt的下载,不过我们更倾向于去资源下载页面(https://download.qt.io/official_release ...