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表 +-- ...
随机推荐
- iOS内存管理个人总结
一.变量,本质代表一段可以操作的内存,她使用方式无非就是内存符号化+数据类型 1.保存变量有三个区域: 1>静态存储区 2>stack 3>heap 2.变量又根据声明的位置有两种称 ...
- zabbix 3.0快速安装简介（centos 7）
zabbix快速安装 系统版本:centos 7 通过yum方法安装Zabbix3.0,安装源为阿里云 yum源配置 rpm -ivh http://mirrors.aliyun.com/zabbix ...
- System类
System类是一些与系统相关属性和方法的集合,而且System类中所有的属性都是静态的,要想引用这些属性和方法,直接使用System类调用即可. //======================== ...
- Deep Learning in a Nutshell: History and Training
Deep Learning in a Nutshell: History and Training This series of blog posts aims to provide an intui ...
- OpenGL Tutorial
https://open.gl https://www.processing.org/tutorials/pshader/
- HighCharts学习笔记（一）HighCharts入门
一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...
- The method below converts an array of objects to a DataTable object in C#.
http://www.c-sharpcorner.com/blogs/dynamic-objects-conveting-into-data-table-in-c-sharp1 public stat ...
- Python 对象的引用计数和拷贝
Python 对象的引用计数和拷贝 Python是一种面向对象的语言,包括变量.函数.类.模块等等一切皆对象. 在python中,每个对象有以下三个属性: 1.id,每个对象都有一个唯一的身份标识自己 ...
- C++基础入门
#include "iostream" using namespace std; class A{ public: A(int x1){ x = x1; } ...
- 柱状堆积图Echarts
Map<String,Object> map = new HashMap<String, Object>(); //图例的千人.双百 HashMap<String, St ...