您的位置:68399皇家赌场 > 服务器租用 > 粗略的旋转CD制作,轻便旋转CD制作

粗略的旋转CD制作,轻便旋转CD制作

发布时间:2019-08-09 22:52编辑:服务器租用浏览(87)

    改朝换代的HTML5叶片飘落动画,

    那款HTML5叶片飘落动画是基于webkit内核的,相当于说要在webkit内核的浏览器上技能接纳那款动画。

    图片 1

    源码下载 示范地址

    HTML代码

    XML/HTML Code复制内容到剪贴板

    1. <div id="container">  
    2.   <!-- The container is dynamically populated using the init function in leaves.js -->  
    3.   <!-- Its dimensions and position are defined using its id selector in leaves.css -->  
    4.   <div id="leafContainer"></div>  
    5.   <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->  
    6.   <div id="message">  
    7.    <em>那是基于webkit的落叶动画</em>  
    8.   </div>  
    9. </div>  

    CSS代码

    CSS Code复制内容到剪贴板

    1. #container {   
    2.     position: relative;   
    3.     height: 700px;   
    4.     width: 500px;   
    5.     margin: 10px auto;   
    6.     overflow: hidden;   
    7.     border: 4px solid #5C090A;   
    8.     background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;   
    9. }   
    10.   
    11. /* Defines the position and dimensions of the leafContainer div */  
    12. #leafContainer    
    13. {   
    14.     position: absolute;   
    15.     width: 100%;   
    16.     height: 100%;   
    17. }   
    18.   
    19. /* Defines the appearance, position, and dimensions of the message div */  
    20. #message   
    21. {   
    22.     position: absolute;   
    23.     top: 160px;   
    24.     width: 100%;   
    25.     height: 300px;   
    26.     background:transparent url('images/textBackground.png') repeat-x center;   
    27.     color: #5C090A;   
    28.     font-size: 220%;   
    29.     font-family: 'Georgia';   
    30.     text-align: center;   
    31.     padding: 20px 10px;   
    32.     -webkit-box-sizing: border-box;   
    33.     -webkit-background-size: 100% 100%;   
    34.     z-index: 1;   
    35. }   
    36.   
    37. p {   
    38.   margin: 15px;   
    39. }   
    40.   
    41. a   
    42. {   
    43.   color: #5C090A;   
    44.   text-decoration: none;   
    45. }   
    46.   
    47. /* Sets the color of the "Dino's Gardening Service" message */  
    48. em    
    49. {   
    50.     font-weight: bold;   
    51.     font-style: normal;   
    52. }   
    53.   
    54. .phone {   
    55.   font-size: 150%;   
    56.   vertical-align: middle;   
    57. }   
    58.   
    59. /* This CSS rule is applied to all div elements in the leafContainer div.  
    60.    It styles and animates each leafDiv.  
    61. */  
    62. #leafContainer > div    
    63. {   
    64.     position: absolute;   
    65.     width: 100px;   
    66.     height: 100px;   
    67.   
    68.     /* We use the following properties to apply the fade and drop animations to each leaf.  
    69.        Each of these properties takes two values. These values respectively match a setting  
    70.        for fade and drop.  
    71.     */  
    72.     -webkit-animation-iteration-count: infinite, infinite;   
    73.     -webkit-animation-direction: normal, normal;   
    74.     -webkit-animation-timing-function: linear, ease-in;   
    75. }   
    76.   
    77. /* This CSS rule is applied to all img elements directly inside div elements which are  
    78.    directly inside the leafContainer div. In other words, it matches the 'img' elements  
    79.    inside the leafDivs which are created in the createALeaf() function.  
    80. */  
    81. #leafContainer > div > img {   
    82.      position: absolute;   
    83.      width: 100px;   
    84.      height: 100px;   
    85.   
    86.     /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip  
    87.        animations on each leaf.  
    88.        The createALeaf function in the Leaves.js file determines whether a leaf has the   
    89.        clockwiseSpin or counterclockwiseSpinAndFlip animation.  
    90.     */  
    91.      -webkit-animation-iteration-count: infinite;   
    92.      -webkit-animation-direction: alternate;   
    93.      -webkit-animation-timing-function: ease-in-out;   
    94.      -webkit-transform-origin: 50% -100%;   
    95. }   
    96.   
    97. /* Hides a leaf towards the very end of the animation */  
    98. @-webkit-keyframes fade   
    99. {   
    100.     /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */  
    101.     0%   { opacity: 1; }   
    102.     95%  { opacity: 1; }   
    103.     100% { opacity: 0; }   
    104. }   
    105.   
    106. /* Makes a leaf fall from -300 to 600 pixels in the y-axis */  
    107. @-webkit-keyframes drop   
    108. {   
    109.     /* Move a leaf to -300 pixels in the y-axis at the start of the animation */  
    110.     0%   { -webkit-transform: translate(0px, -50px); }   
    111.     /* Move a leaf to 600 pixels in the y-axis at the end of the animation */  
    112.     100% { -webkit-transform: translate(0px, 650px); }   
    113. }   
    114.   
    115. /* Rotates a leaf from -50 to 50 degrees in 2D space */  
    116. @-webkit-keyframes clockwiseSpin   
    117. {   
    118.     /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */  
    119.     0%   { -webkit-transform: rotate(-50deg); }   
    120.     /*  Rotate a leaf by 50 degrees in 2D space at the end of the animation */  
    121.     100% { -webkit-transform: rotate(50deg); }   
    122. }   
    123.   
    124. /* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */  
    125. @-webkit-keyframes counterclockwiseSpinAndFlip    
    126. {   
    127.     /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */  
    128.     0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }   
    129.     /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */  
    130.     100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }   
    131. }   

    JavaScript代码

    JavaScript Code复制内容到剪贴板

    1. /* Define the number of leaves to be used in the animation */  
    2. const NUMBER_OF_LEAVES = 30;   
    3.   
    4. /*   
    5.     Called when the "Falling Leaves" page is completely loaded.  
    6. */  
    7. function init()   
    8. {   
    9.     /* Get a reference to the element that will contain the leaves */  
    10.     var container = document.getElementById('leafContainer');   
    11.     /* Fill the empty container with new leaves */  
    12.     for (var i = 0; i < NUMBER_OF_LEAVES; i )    
    13.     {   
    14.         container.appendChild(createALeaf());   
    15.     }   
    16. }   
    17.   
    18. /*  
    19.     Receives the lowest and highest values of a range and  
    20.     returns a random integer that falls within that range.  
    21. */  
    22. function randomInteger(low, high)   
    23. {   
    24.     return low   Math.floor(Math.random() * (high - low));   
    25. }   
    26.   
    27. /*  
    28.    Receives the lowest and highest values of a range and  
    29.    returns a random float that falls within that range.  
    30. */  
    31. function randomFloat(low, high)   
    32. {   
    33.     return low   Math.random() * (high - low);   
    34. }   
    35.   
    36. /*  
    37.     Receives a number and returns its CSS pixel value.  
    38. */  
    39. function pixelValue(value)   
    40. {   
    41.     return value   'px';   
    42. }   
    43.   
    44. /*  
    45.     Returns a duration value for the falling animation.  
    46. */  
    47.   
    48. function durationValue(value)   
    49. {   
    50.     return value   's';   
    51. }   
    52.   
    53. /*  
    54.     Uses an img element to create each leaf. "Leaves.css" implements two spin   
    55.     animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This  
    56.     function determines which of these spin animations should be applied to each leaf.  
    57.  
    58. */  
    59. function createALeaf()   
    60. {   
    61.     /* Start by creating a wrapper div, and an empty img element */  
    62.     var leafDiv = document.createElement('div');   
    63.     var image = document.createElement('img');   
    64.   
    65.     /* Randomly choose a leaf image and assign it to the newly created element */  
    66.     image.src = 'images/realLeaf'   randomInteger(1, 5)   '.png';   
    67.   
    68.     leafDiv.style.top = "-100px";   
    69.   
    70.     /* Position the leaf at a random location along the screen */  
    71.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   
    72.   
    73.     /* Randomly choose a spin animation */  
    74.     var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';   
    75.   
    76.     /* Set the -webkit-animation-name property with these values */  
    77.     leafDiv.style.webkitAnimationName = 'fade, drop';   
    78.     image.style.webkitAnimationName = spinAnimationName;   
    79.   
    80.     /* Figure out a random duration for the fade and drop animations */  
    81.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
    82.   
    83.     /* Figure out another random duration for the spin animation */  
    84.     var spinDuration = durationValue(randomFloat(4, 8));   
    85.     /* Set the -webkit-animation-duration property with these values */  
    86.     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration   ', '   fadeAndDropDuration;   
    87.   
    88.     var leafDelay = durationValue(randomFloat(0, 5));   
    89.     leafDiv.style.webkitAnimationDelay = leafDelay   ', '   leafDelay;   
    90.   
    91.     image.style.webkitAnimationDuration = spinDuration;   
    92.   
    93.     // add the <img> to the <div>   
    94.     leafDiv.appendChild(image);   
    95.   
    96.     /* Return this img element so it can be added to the document */  
    97.     return leafDiv;   
    98. }   
    99.   
    100. /* Calls the init function when the "Falling Leaves" page is full loaded */  
    101. window.addEventListener('load', init, false);   

    上述就是本文的全部内容,希望对咱们学习抱有扶助。

    那款HTML5叶片飘落动画是依赖webkit内核的,也等于说要在webkit内核的浏览器上工夫动用那款动画。 源码下载 演示...

    .container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
    }

    1.1、基础的选拔器

    图片 2

    北京蓝字体中选择器的分别是:p.info的野趣是p成分中务必有class="info"属性将被挑选,p .info是挑选后代成分,示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>选择器</title>
            <style type="text/css">
                p.info{
                    color: red;
                }
                p .info{
                    color: blue;
                }
            </style>
        </head>
        <body>
            <h2>选择器</h2>
            <p class="info">p1</p>
            <p>
                    span1
                    <p>p3</p>
            </p>
        </body>
    </html>
    

     运维结果:

    图片 3

    总结的团团转CD制作,轻巧旋转CD制作

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <style>
    body{
    background-color:azure
    }
    .box{
    width: 100px;
    height: 100px;
    border-radius: 50PX;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50PX;
    -ms-border-radius: 50PX;
    overflow: hidden;
    position: relative;
    margin: auto;
    }
    .pic{
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    animation: pql 4s linear infinite;
    -webkit-animation: pql 4s linear infinite;
    -moz-animation: pql 4s linear infinite;
    -ms-animation: pql 4s linear infinite;
    border-radius: 50PX;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50PX;
    -ms-border-radius: 50PX;
    }

    @-webkit-keyframes pql{
    100%{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    @-moz-keyframes pql{
    100%{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    @-ms-keyframes pql{
    100%{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    @keyframes pql{
    100%{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    .mc{
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 15PX;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15PX;
    -ms-border-radius: 15PX;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    background: url(img/MusicPause1.png) center center ;
    background-size: 100%;
    cursor: pointer;
    }

    </style>
    </head>
    <body>

    <video style="display: none;" id="MVO" loop="start" autoplay="true" src="img/1"></video>
    <div class="box">
    <img class="pic" src="img/1.jpg"/>
    <div class="mc">
    </div>
    </div>
    </body>
    <script>
    var myVideo = document.getElementById("MVO");
    $(".mc").click(function(){
    if (myVideo.paused) {
    myVideo.play();
    $(".pic").css("animation-play-state","running");
    $(".mc").css("background-image","url(img/MusicPause1.png)")
    } else{
    myVideo.pause();
    $(".pic").css("animation-play-state","paused");
    $(".mc").css("background-image","url(img/MainCont1.png)")
    }
    })
    </script>
    </html>

    !DOCTYPE html html head meta charset="utf-8" / title/title script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"...

    .container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    }

    1.2、组合选拔器

    图片 4

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>组合选择器</title>
            <style type="text/css">
                 #div1 span
                 {
                     color: red;
                 }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <div id="div1">
                span1
                <div id="div2">
                    span2
                </div>
            </div>
            span3
        </body>
    </html>
    

    运维结果:

    图片 5

     示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>组合选择器</title>
            <style type="text/css">
                 #div1 > span
                 {
                     color: red;
                 }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <div id="div1">
                span1
                <div id="div2">
                    span2
                </div>
            </div>
            span3
        </body>
    </html>
    

    图片 6

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>组合选择器</title>
            <style type="text/css">
                 #div1   span
                 {
                     color: red;
                 }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <div id="div1">
                span1
                <div id="div2">
                    span2
                </div>
            </div>
            span3
            span4
        </body>
    </html>
    

    图片 7

    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }

    1.1、特点

    <link rel="stylesheet" type="text/css" href="fakeLoader.css">
    <script type="text/javascript" src="fakeLoader.min.js"></script>
    <div id="fakeLoader"></div>
    <script type="text/javascript">
      $('div#fakeLoader').fakeLoader({
        timeToHide : 贰仟, //假加载的延时时间长度
        bgColor : '#2fd0b5', //背景颜色
        spinner : 'spinner3' //使用哪一类预设动画,这里运用的是spinner3
      });
    </script>

    4.1、相对长度单位

    1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

     

    四、刻度

    在CSS中刻度是用来安装元素尺寸的单位。

    极其规值0能够简轻易单单位。举个例子:margin:0px能够写成margin:0
    一些性质只怕允许有负长度值,只怕有早晚的界定限制。要是不扶助负长度值,那应该转变成能够被协助的前段时间的三个长短值。
    长度单位包含总计:相对单位和相对单位。
    争论长度单位包涵有: em, ex, ch, rem, vw, vh, vmax, vmin
    纯属长度单位包含有: cm, mm, q, in, pt, pc, px

     图片 8

    @-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: translateY(-10px) }
    20% { -webkit-transform: translateY(-20px) }
    }

    1.5、伪元素

    图片 9

    正式的伪成分应该利用::,但单:也行,只是为着合营。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>伪类</title>
            <style type="text/css">
                a::before {
                    content: "网站";
                    display: inline-block;
                    background: red;
                    color: white;
                }
            </style>
        </head>
        <body>
            <h2>伪元素</h2>
            <a href="http://www.baidu.com">百度</a>
            <a href="http://best.cnblogs.com">博客园</a>
        </body>
    </html>
    

    运营结果:

    图片 10

    .cube1, .cube2 {
    background-color: #fff;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;

    二、选择器

    在接纳CSS时大家先是要做的作业是找到成分,在写相应的体制,在CSS2.第11中学最常使用的是三种选拔器:

    a)、ID选择器:以#始于,援引时利用id,如id="div1"

    #div1

    {

       color:red;

    }

    b)、类采取器:以.初始,使用class属性援引,能够有多少个,如class="cls1 cls2 cls3"

    .cls1

    {

       background-color:#99ccff;

    }

    c)、标签选取器:以标签字称开头,如p,span,div,*

    div span

    {

       font-size:14px;

    }

    本来还应该有如伪类选用,a:hover,a:link,a:visted,a:active。

    在CSS3中新扩展了重重的选拔器,如果大家会jQuery,jQuery中多数选用器在CSS3中都能够直接行使。

     

    4.2、文本相对长度单位

    em
    相对长度单位。相对于近期目标内文本的字体尺寸。如当前对行内文本的书体尺寸未被人工设置,则相对于浏览器的私下认可字体尺寸。(相对父成分的字体大小倍数)
    body { font-size: 14px; }
    h1 { font-size: 16px; }
    .size1 p { font-size: 1em; }
    .size2 p { font-size: 2em; }
    .size3 p { font-size: 3em; }

    浏览器的默许字体大小为16像素,浏览器私下认可样式也称之为user agent stylesheet,正是持有浏览器内置的暗许样式,比相当多是能够被涂改的,但chrome不能够向来更动,能够被用户样式覆盖。

    图片 11

    示范代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                #div2{
                    background: blue;
                    height: 5em;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    

    结果:图片 12

    div2的可观为80px,是因为user agent stylesheet私下认可样式中字体大小为16px,遵照这么些准则我们得以手动修改字体大小,div2的万丈将发生变化。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                #div1 {
                    font-size: 20px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 5em;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    

    结果:

    图片 13

    rem

    rem是CSS3新添的八个相对单位(root em,根em),相对于根成分(即html成分)font-size计算值的翻番
    只相对于根成分的尺寸
    rem(font size of the root element)是指相对于根元素的字体大小的单位。简来讲之它正是多个周旋单位。看到rem我们一定会想起em单位,em(font size of the element)是指相对于父成分的字体大小的单位。它们中间其实很相像,只可是五个乘除的条条框框是依据根成分一个是依赖父成分总结。(相对是的HTML成分的书体大,暗许16px)

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                #div1 {
                    font-size: 20px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 5rem;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    

     

    运行结果:

    图片 14

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                html {
                    font-size: 10px;
                }
                body {
                    font-size: 16px;
                }
                #div1 {
                    font-size: 20px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 5rem;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    

    结果:

    图片 15

    按理说高度为5*10px=50像素中度,但那边为60,是因为chrome浏览器限制了细微字体大小为12px,从上海体育场面能够见见。

      

    1.3、扶助文书档案与读书

    高于的鼎力相助文书档案是最佳的读书资料,CSS2的相助,特别详细:

    图片 16

    CSS3的协助文书档案:

    图片 17

    图片 18

     

    点击下载支持文书档案

    .spinner7 .circ2 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
    }

    CSS3与页面布局学习笔记(一)——概要、选拔器、特殊性与刻度单位,css3学习笔记

    web前端开垦者最最注的剧情是多个:HTML、CSS与JavaScript,他们分别在分裂方面发挥协和的作用,HTML完结页面结构,CSS完结页面包车型地铁呈现与风格,JavaScript完结部分客户端的功力与事务。当然内容与用户能源也是不能够忽视的。尽量不要跨任务范围使用,有一些“SRP单一任务”的乐趣,如字体大小应该是CSS调整的,就不应有选取HTML标签达成,若是CSS能缓慢解决的主题材料尽量不要用JavaScript完结。

    图片 19图片 20

    .container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
    }

    五、示例与赞助下载

     援救文书档案与示范下载

    参照:

    图片 21

    web前端开垦者最最注的剧情是四个:HTML、CSS与JavaScri...

    下边让大家来使用一下该插件,试试它的简练方便 : 

    三、特殊性(优先级)

    a)、同种类,同等级的体制后面一个先于前边贰个
    b)、ID > 类样式 > 标签 > *
    c)、内联>ID接纳器>伪类>属性选取器>类选拔器>标签选用器>通用接纳器(*)>承继的样式
    d)、具体 > 泛化的,特殊性即css优先级
    e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

    内嵌样式:内嵌在要素中,<span><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>优先级</title> <style type="text/css"> * { color: yellow; } p { color: red !important; } .cls1 { color: deeppink; } .cls2{ color: blueviolet; } #p1{ color:blue; } </style> </head> <body> <div> <p id="p1" class="cls2 cls1" style="color:#ccc">p1</p> <span>span1</span> </div> </body> </html>

    运营结果:

    图片 22

    @-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
    }

    3.2、总计特殊性值

    important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性采取 > 伪对象 > 承继 > 通配符
    权重、特殊性总括法:
    CSS样式选取器分为4个级次,a、b、c、d
    1.举例体制是行内样式(通过Style=“”定义),那么a=1,1,0,0,0
    2.b为ID选用器的总和 0,1,0,0
    3.c为属性选拔器,伪类选拔器和class类选用器的数目。0,0,1,0

    4.d为标签、伪成分选用器的多少 0,0,0,1

    5.!important 权重最高,比 inline style 还要高

     例如结果为:1093比1100,按位相比,从左到右,只要壹人胜出则即时胜出,不然继续比较。

    图片 23

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>优先级</title>
            <style type="text/css">
                html body #div1
                {
                    background: red;
                }
    
                .cls1 #div1{  
                    background: blue;
                }
            </style>
        </head>
        <body>
            <div class="cls1">
                <div id="div1">div1
                </div>
                <div id="div2">div2
                </div>
            </div>
        </body>
    </html>
    

    运营结果:

    图片 24

    因为html body #div1的独本性值为:0102,而.cls1 #div1的特出性值为0110,后面一个胜出。

    .spinner6 .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    }

    1.4、伪类

    图片 25

     示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>伪类</title>
            <style type="text/css">
               td:first-child
               {
                     background: lightcoral;
               }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <table border="1" width="100%">
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
            </table>
            <hr />
            <table border="1" width="100%">
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
            </table>
        </body>
    
    </html>
    

     运维结果:

    图片 26

     演习:实现隔行换色,当鼠标悬停在每一行上时高亮突显为香艳,按下时高亮中湖蓝。

    图片 27

            <style type="text/css">
               tr:nth-child(2n 1){
                    background:lightblue;
               }
               tr:hover{
                   background: yellow;
               }
               tr:active{
                   background: orangered;
               }
            </style>
    

    .spinner2 {
    width: 40px;
    height: 40px;
    position: relative;
    }

    一、CSS3概要

    CSS(Cascading Style Sheet)是层叠样式表的情趣,CSS3正是在CSS2.1的底子上进级的CSS新本子,属于HTML5的一片段。它能够有效地对页面包车型地铁布局、字体、颜色、背景、动画和另外成效得以实现。CSS3是CSS技巧的提高版本,CSS3语言开荒是朝着模块化发展的。在此以前的标准作为二个模块实在是太强大并且相比复杂,所以,把它表达为一些小的模块,越多新的模块也被投入进去。这几个模块包罗: 盒子模型、列表模块、超链接情势 、语言模块 、背景和边框 、文字特效 、多栏布局等。

    图片 28

    @keyframes stretchdelay {
    0%, 40%, 100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    } 20% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    }
    }

    1.2、效果演示

    纯CSS3画出小黄种人并完毕动画效果

    图片 29

    HTML页面:

    图片 30<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drawLittleHuang</title> <link rel="stylesheet" type="text/css" href="drawLittleHuang.css"> </head> <body> <div class="wrapper"><!-- 容器 --> <div class="littleH"><!-- 小黄人 --> <div class="bodyH"><!-- 身体 --> <div class="trousers"><!-- 裤子 --> <div class="condoleBelt"><!-- 吊带 --> <div class="left"></div> <div class="right"></div> </div> <div class="trousers_top"></div><!-- 裤子特出的矩形部分 --> <div class="pocket"></div><!-- 裤袋 --> <!-- 三条线 --> <span class="line_left"></span> <span class="line_right"></span> <span class="line_bottom"></span> </div> </div> <div class="hair"><!-- 头发 --> <span class="left_hair_one"></span> <span class="left_hair_two"></span> </div> <div class="eyes"><!-- 眼睛 --> <div class="leftEye"><!-- 左眼 --> <div class="left_blackEye"> <div class="left_white"></div> </div> </div> <div class="rightEye"><!-- 右眼 --> <div class="right_blackEye"> <div class="right_white"></div> </div> </div> </div> <div class="mouse"><!-- 嘴巴 --> <div class="mouse_shape"></div> </div> <div class="hands"><!-- 双手 --> <div class="leftHand"></div> <div class="rightHand"></div> </div> <div class="feet"><!-- 双脚 --> <div class="left_foot"></div> <div class="right_foot"></div> </div> <div class="groundShadow"></div><!-- 脚底阴影 --> </div> </div> </body> </html> View Code

    CSS样式:

    图片 31@charset "utf-8"; body{ margin: 0; padding:0; } .wrapper{ width: 300px; margin:100px auto; } .litteH{ position: relative; } .bodyH{ position: absolute; width: 240px; height: 400px; border:5px solid #000; border-radius: 115px; background: rgb(249,217,70); overflow: hidden; z-index: 2; } .bodyH .condoleBelt{ position: absolute; } .bodyH .condoleBelt .left, .bodyH .condoleBelt .right{ width: 100px; height: 16px; border:5px solid #000; background: rgb(32,116,160); position: absolute; top:-90px; left:-35px; z-index: 2; -webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{ top:-88px; left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt .left:after, .bodyH .condoleBelt .right:after{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: #000; position: absolute; top:4px; left:88px; } .bodyH .condoleBelt .left:after{ left:5px; } .bodyH .trousers{ position: absolute; bottom: 0; width: 100%; height: 100px; border-top: 6px solid #000; background: rgb(32,116,160); } .trousers_top{ width: 160px; height: 60px; border:6px solid #000; border-bottom: none; border-radius: 0 0 5px 5px; background: rgb(32,116,160); position: absolute; bottom: 100px; left:34px; } .pocket{ width: 60px; height: 45px; border:6px solid #000; border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px; left:84px; } .line_right{ width: 30px; height: 30px; border-bottom-left-radius: 100px; border-bottom:6px solid #000; border-left:6px solid #000; position: absolute; left: 0; bottom:60px; -webkit-transform:rotate(-75deg); } .line_left{ width: 30px; height: 30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000; border-right:6px solid #000; position: absolute; right: 0; bottom:63px; -webkit-transform:rotate(75deg); } .line_bottom{ height: 40px; border:3px solid #000; border-radius: 3px; position: absolute; left:118px; bottom: 0px; } .hair{ position: relative; } .left_hair_one{ width: 130px; height: 100px; border-radius: 50%; border-top:8px solid #000; position: absolute; left:17px; top:-17px; -webkit-transform:rotate(27deg); -webkit-animation: lefthair 2s ease-in-out infinite; } @-webkit-keyframes lefthair{ 0%,25%,31%,100%{ } 30%{ -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0); } } .left_hair_two{ width: 80px; height: 80px; border-radius: 50%; border-top:6px solid #000; position: absolute; left:45px; top:-10px; -webkit-transform:rotate(15deg); } .eyes{ position: relative; z-index: 3; } .eyes .leftEye,.eyes .rightEye{ width: 85px; height: 85px; border-radius: 50%; border:6px solid #000; background: #fff; position: absolute; top:60px; left: 27px; } .eyes .leftEye{ left: 124px; } .eyes .leftEye .left_blackEye, .eyes .rightEye .right_blackEye{ width: 40px; height: 40px; border-radius: 50%; background: #000; position: absolute; top:24px; left:22px; -webkit-animation: blackeye 5s ease-in infinite; } @-webkit-keyframes blackeye{ 0%,20%,50%,70%,100%{ -webkit-transform: translateX(0px); } 30%,40%{ -webkit-transform: translateX(15px); } 80%,90%{ -webkit-transform: translateX(-15px); } } .eyes .leftEye .left_blackEye .left_white, .eyes .rightEye .right_blackEye .right_white{ width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; top:7px; left:17px; -webkit-animation: whiteeye 5s ease-in-out infinite; } @-webkit-keyframes whiteeye{ 0%,20%,50%,70%,100%{ -webkit-transform: translateX(0px); } 30%,40%{ -webkit-transform: translate3d(3px,4px,0); } 80%,90%{ -webkit-transform: translate3d(-15px,4px,0); } } .eyes .leftEye .left_blackEye .left_white{ top:4px; left:17px; } .eyes .leftEye:after, .eyes .rightEye:after{ content: ''; width: 28px; height: 18px; background: #000; position: absolute; left:-30px; top:37px; -webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{ left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); } .mouse{ position: relative; } .mouse .mouse_shape{ width: 55px; height: 35px; border:5px solid #000; border-bottom-left-radius: 30px; background: #fff; position: absolute; top:175px; left:98px; z-index: 3; -webkit-transform:rotate(-35deg); -webkit-animation: mouse 5s ease-in-out infinite; } @-webkit-keyframes mouse{ 40%,43%{ width: 45px; height: 25px; top:180px; } 0%,35%,48%,100%{ width: 55px; height: 35px; top:175px; -webkit-transform:rotate(-35deg); } } .mouse .mouse_shape:after{ content: ''; width: 70px; height: 32px; border-bottom:5px solid #000; border-radius:35px 26px 5px 5px; background: rgb(249,217,70); position: absolute; top:-16px; left:3px; -webkit-transform:rotate(34deg); -webkit-animation: mouse_mask 5s ease-in-out infinite; } @-webkit-keyframes mouse_mask{ 40%,43%{ width: 60.5px; top:-19.3px; left:1.5px; } 0%,35%,48%,100%{ width: 70px; top:-16px; left:3px; -webkit-transform:rotate(33deg); } } .hands{ position: relative; } .hands .leftHand, .hands .rightHand{ width: 80px; height: 80px; border:6px solid #000; border-radius: 25px; background: rgb(249,217,70); position: absolute; top:220px; left:-23px; -webkit-transform:rotate(40deg); -webkit-animation:rightHand .8s ease-in-out infinite; } @-webkit-keyframes rightHand{ 0%,50%,100%{ -webkit-transform: rotate(40deg); } 30%{ -webkit-transform: rotate(37deg) translateX(1px); } } .hands .leftHand{ left:182px; top:220px; -webkit-transform:rotate(-40deg); -webkit-animation:leftHand .8s ease-in-out infinite; } @-webkit-keyframes leftHand{ 0%,50%,100%{ -webkit-transform: rotate(-40deg); } 80%{ -webkit-transform: rotate(-37deg) translateX(-1px); } } .hands .leftHand:after, .hands .rightHand:after{ content: ''; width: 6px; border:3px solid #000; border-radius: 3px; position: absolute; left:13px; top:50px; -webkit-transform:rotate(90deg); } .hands .leftHand:after{ left:53px; top:50px; -webkit-transform:rotate(-90deg); } .feet{ position: relative; } .feet .left_foot, .feet .right_foot{ width: 36px; height: 50px; border-bottom-right-radius: 6px; border-bottom-left-radius: 9px; background: #000; position: absolute; top: 406px; left:88px; -webkit-transform-origin: right top; -webkit-animation: rightfoot .8s ease-in-out infinite; } @-webkit-keyframes rightfoot{ 0%,50%,100%{ -webkit-transform: rotate(0deg); } 80%{ -webkit-transform: rotate(10deg); } } .feet .left_foot{ border-bottom-right-radius: 9px; border-bottom-left-radius: 6px; left:130px; -webkit-transform-origin: left top; -webkit-animation: leftfoot .8s ease-in-out infinite; } @-webkit-keyframes leftfoot{ 0%,50%,100%{ -webkit-transform: rotate(0deg); } 30%{ -webkit-transform: rotate(-10deg); } } .feet .left_foot:after, .feet .right_foot:after{ content: ''; width: 60px; height: 35px; border-radius: 20px 10px 21px 15px; background: #000; position: absolute; left:-36px; top:14.4px; -webkit-transform:rotate(5deg); } .feet .left_foot:after{ border-radius: 10px 20px 15px 21px; left:13px; -webkit-transform:rotate(-5deg); } .groundShadow{ width: 200px; height: 2px; border-radius: 50%; background: rgba(0,0,0,0.3); box-shadow: 0 0 2px 4px rgba(0,0,0,0.3); position: relative; top: 455px; left:25px; } View Code

     

    相册演示的代码能够在示范中下载到。

    分享给大家,希望大家能为移动WebApp添砖加瓦吧。

    4.3、Web App与Rem

    为了促成简单的响应式布局,能够使用html成分中字体的分寸与显示屏间的比值设置font-size的值实现当显示器分辨率变化时让要素也更改,从前的tmall就接纳这种艺术,示比如下:

    图片 32

    示例一:

    图片 33<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rem phone test</title> <!-- 描述:视口 --> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 20px; overflow: hidden; outline: 0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } body { height: 100%; margin: 0; overflow: hidden; -webkit-user-select: none; /*打消用户挑选*/ width: 100%; } header, footer { width: 100%; line-height: 1.5rem; font-size: 1rem; color: #000; border: 1px solid #ccc; text-align: center; background-color: #ccc; } .bd { margin-top: 1rem; margin-bottom: .5rem; margin-right: -.5rem; font-size: 0; } .bd:after { clear: both; } .box { width: 5rem; height: 5rem; display: inline-block; margin-right: .5rem; margin-bottom: .5rem; } .blue-box { background-color: #06c; } .org-box { background-color: #1fc195; } </style> </head> <body> <header>小编是尾部</header> <div class="bd"> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> </div> <footer>作者是页脚</footer> <script> /* ;(function(win){ win.alert("Hello IIEF"); })(window); */ //定义三个办法并实行 (function(doc, win) { //得到文书档案的根节点html var docEl = doc.documentElement; //就算window中存在orientationchange对象,则取orientationchange,不然取resize //为了事件绑定 resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize'; //定义一个格局,重新总结font-size大小 var recalc = function() { //页面包车型客车增加率 var clientWidth = docEl.clientWidth; //若无大幅则脱离 if (!clientWidth) return; //重新总计font-size大小,假定320的大幅时字体大小为20;,当页面变化时再一次设置字体大小 docEl.style.fontSize = 20 * (clientWidth / 320) 'px'; }; //如若浏览器不支持增多事件监听则停止 if (!doc.addEventListener) return; //加多事件监听,内定事件处理函数的时期或阶段(boolean)true表示在破获事件实践,false表示冒泡时试行win.add伊芙ntListener(resizeEvt, recalc, false); //当Dom树加载成功时施行总计,DOMContentLoaded事件要在window.onload以前实行doc.add伊芙ntListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html> View Code

    运行结果:

     图片 34

    图片 35

    示例二:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>web app 与rem</title>
            <style type="text/css">
                html {
                    font-size: 20px;
                }
                body {
                    font-size: 16px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 3rem;
                    width: 3rem;
                    font-size: .7rem;
                }
            </style>
        </head>
    
        <body>
            <div id="div2">
                Hello rem
            </div>
            <script type="text/javascript">
                function resize() {
                    var w = document.documentElement.clientWidth;
                    document.documentElement.style.fontSize = w * 20 / 290   "px";
                }
                window.onresize =resize;
    
                resize();
            </script>
        </body>
    
    </html>
    

     

    运作结果:

     图片 36

    图片 37

    变显示屏变宽时成分大小也随即产生变化,但此处并未考虑中度,但为响应式布局与hack提供了思路。

    <!-- fakeLoader END -->

    1.3、属性选用器

    图片 38

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>属性选择器</title>
            <style type="text/css">
                div[id][class~=cls1] {
                    background: lightgreen;
                }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            span0
            <div id="div1" class="cls1">
                div1
            </div>
            <div id="div2" class="cls1 cls2">
                div2
            </div>
        </body>
    
    </html>
    

     运维结果:

    图片 39

    .container1 > div, .container2 > div, .container3 > div {
    width: 6px;
    height: 6px;
    background-color: #fff;

    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
    }

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:粗略的旋转CD制作,轻便旋转CD制作

    关键词: 68399皇家赌场 WebApp jQuery插件 fakeLoader