zoukankan      html  css  js  c++  java
  • 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

         {

               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="images/main5-pic1.png">

               <img src="images/main5-pic2.png">

               <img src="images/main5-pic3.png">

         </div> 

    </body>              

    </html>                 

                            

                             


  • 相关阅读:
    121.买卖股票 求最大收益1 Best Time to Buy and Sell Stock
    409.求最长回文串的长度 LongestPalindrome
    202.快乐数 Happy Number
    459.(KMP)求字符串是否由模式重复构成 Repeated Substring Pattern
    326.是否为3的平方根 IsPowerOfThree
    231.是否为2的平方根 IsPowerOfTwo
    461.求两个数字转成二进制后的“汉明距离” Hamming Distance
    206.反转单链表 Reverse Linked List
    448. 数组中缺少的元素 Find All Numbers Disappeared in an Array
    常见表单元素处理
  • 原文地址:https://www.cnblogs.com/resolvent/p/5877213.html
Copyright © 2011-2022 走看看