H53D旋转-遁地龙卷风
(-1)写在前面
首先图片是我从互联网上下载的，向这位前辈致敬。我用的是chrome49，没有加不同浏览器的前缀，jquery3.0，图片资源放在了我的百度云盘上http://pan.baidu.com/s/1o7LyHp4
(1)知识预备
a.浏览器x、y、z轴的概念
左手竖代表y轴，右手横代表x轴，左右手摆成一个十字，z轴是即垂直x轴也垂直y轴穿过x、y交点的一条直线。
b. :nth-of-type(1)
img:nth-of-type(1)，所有有子元素img的父元素的第一个img子元素
body :nth-of-type(1) 等同于body *:nth-of-type(1)
(2)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script type="text/javascript" src="debug-jquery-3.0.0.js"></script>
<script type="text/javascript" src="base.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>为了生活</title>
<style type="text/css">
*
{
margin-top:0px;
padding:0;
}
body
{
position:absolute;
}
#lol
{
width:530px;
height:530px;
position:absolute;
}
#lol img
{
display:block;
position:absolute;
border:1px #6F0000 solid;
}
#lol img:nth-of-type(1)
{
animation: one 10s linear 3s infinite;
}
@keyframes one
{
to
{
transform: rotateX(360deg);
}
}
#lol img:nth-of-type(2)
{
animation: two 10s linear 2s infinite;
}
@keyframes two
{
to
{
transform: rotateY(360deg);
}
}
#lol img:nth-of-type(3)
{
animation: three 10s linear 1s infinite;
}
@keyframes three
{
to
{
transform:rotateZ(360deg);
}
}
</style>
<script type="text/javascript">
$(function()
{
$("#lol").centerPos();
//让lol元素水平垂直居中显示，centerPos是自定义函数
})
$.fn.centerPos = function()
{
var parent;
this.each(function(index)
{
parent = this.parentNode;
if(parent == document.body)
{
parent = window;
}
var position = $(this).css("position");
if(position == "fixed" || position=="absolute")
{
$(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")
.css("top",($(parent).height()-this.offsetHeight)/2+"px");
}
else
{
window.console.error("没有设置有效的position值");
}
})
return this;
}
</script>
</head
<body>
<div id="lol">
<img src="data:images/main5-pic1.png">
<img src="data:images/main5-pic2.png">
<img src="data:images/main5-pic3.png">
</div>
</body>
</html>
H53D旋转-遁地龙卷风的更多相关文章
- jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...
- 逻辑思维面试题-java后端面试-遁地龙卷风
(-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...
- JQuery data方法的使用-遁地龙卷风
(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...
- JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...
- jQuery-H5-css3转盘抽奖-遁地龙卷风
(-1)写在前面 这个idea不是我的,首先向这位前辈致敬. 我用的是chrome49, jquery3.0. 完整的程序案例在我的百度云盘http://pan.baidu.com/s/1jI2QSn ...
- H5图像遮罩-遁地龙卷风
(-1)写在前面 这个idea不是我的,向这位前辈致敬.我用的是chrome49.用到的图片资源在我的百度云盘里http://yun.baidu.com/share/link?shareid=1970 ...
- HTML中的标记-遁地龙卷风
第三版 上一版本在未经验证的情况下,盲目的认为很多东西是那样,造成错误,非常抱歉. 0.什么是标记 <input type="checkbox" checked />& ...
- mysql SQL优化之嵌套查询-遁地龙卷风
(-1) 写在前面 这篇随笔的数据使用的是http://blog.csdn.net/friendan/article/details/8072668#comments里的,里面有一些常见的select ...
- mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风
(-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...
随机推荐
- 修改MySQL的默认数据存储引擎
因为MySQL默认的是MyISAM数据引擎,不支持事务也不支持外键,所以需要用到Innodb引擎,于是决定将mysql的默认引擎设置为innodb.1 . 查看MySQL存储引擎是用的哪个?登录MyS ...
- JavaScript事件类型
JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...
- confluence安装
confluence安装 1.jre安装 java下载http://www.java.com/zh_CN/download/manual.jsp 创建目录和解压缩 mkdir -p /usr/loca ...
- Extjs GridPanel用法详解
Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPa ...
- ecshop 默认图处理
function get_banner_path($img) { $img = empty($img) ? C('no_picture') : $img; return $img;}
- ecshop 订单-》设置默认收货地址，或者删除
设置位置:ecs_users标的 country字段,默认是0,默认地址是 users_address 的address_id 设置默认收货地址 /** * 设置默认地址 * * @access ...
- thinkphp查询
public function index(){ $result = M('content')->select() $this->assig('result',$result); $thi ...
- 带条件Count
END) , END) , END) , END) FROM TB
- Java Servlet系列之Servlet生命周期
Servlet生命周期定义了一个Servlet如何被加载.初始化,以及它怎样接收请求.响应请求,提供服务.在讨论Servlet生命周期之前,先让我们来看一下这几个方法: 1. init()方法 在Se ...
- GoLang之基础
GoLang之基础 Go是一种并发的.带垃圾回收的.快速编译的语言. 经典的"hello world"入门: package main import "fmt" ...