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表 +-- ...
随机推荐
- >>> FilterDispatcher <<< is deprecated! Please use the new filters!
在struts2.3.20下,web.xml中使用 会出现*********************************************************************** ...
- Change MYSQL data directory
For example, change mysql data directory from /var/lib/mysql to /var/data/mysql Step1: Copy the /var ...
- 利用Objective-C运行时hook函数的三种方法
版权声明:转载请注明出处:http://blog.csdn.net/hursing 方法一,hook已有公开头文件的类: 首先写一个Utility函数: #import <objc/runtim ...
- Java——下拉列表框：JComboBox
import java.awt.Container; import java.awt.GridLayout; import java.awt.event.WindowAdapter; import j ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【四】——实现模型工厂，依赖注入以及格式配置
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 在上一篇中,我们已经初步开始使用Web Api了,但同时出现了一些很多不足之处,本章我们就着 ...
- codeforces 719A Vitya in the Countryside(序列判断趋势)
题目链接:http://codeforces.com/problemset/problem/719/A 题目大意: 题目给出了一个序列趋势 0 .1 .2 .3 ---14 .15 .14 ----3 ...
- 微软.NET序列化格式
官方文档 https://msdn.microsoft.com/en-us/library/cc236844.aspx 对比 http://www.codeproject.com/Articles/3 ...
- XtraFinder到底好在哪里（标签、隐藏文件、路径拷贝与显示、从这里启动）
类似Chrome的标签 自定义工具栏可添加一个快速显示与隐藏当前目录隐藏文件的功能 拷贝路径 cd 到当前目录这个功能跟PathFinder7类似 当然还有其他很多功能,比如这个返回上级目录,
- C++中const 的各种用法
C++中const 关键字的用法 const修饰变量 const 主要用于把一个对象转换成一个常量,例如: ; size = ; // error: assignment of read-only v ...
- 分布式消息队列RocketMQ部署
一.RocketMQ简介: RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 1.支持严格的消息顺序: 2.支持Topic与Queue两种模式: 3.亿级消息堆积能力: 4.比较友好 ...