css 3-グラデーション、アニメーション過剰、2 dベース

14923 ワード

httml 5

1.CSS 3グラデーションの文法と応用

##    ，    ，      ，

linear-gradient:値1,値2[値3],値4

      1:
            top,to bottom,180deg       

            bottom,to top,0deg       

            left,to right,90deg       

            right,to left,270deg       

            45deg,to top right       

            135deg,to top right       

              
     2：      
     3：                ， 50%，  0 50%
     4：      
     ：                ；

##    ，      （ ）

radial-gradient: 1, 2 [ 3], 4

     1:
            ellipse:    ，           
            circle:  

     2：      
     3：                ， 50%，  0 50%
     4：      
     ：                ；

##    ，          

repeating-radial-gradient 1, 2 [ 3], 4

     1:
            ellipse:    ，           
            circle:  

     2：      
     3：                ， 50%，  0 50%
     4：      
     ：                ；

repeating-linear-gradient 1, 2 [ 3], 4

     1:
            ellipse:    ，           
            circle:  

     2：      
     3：                ， 50%，  0 50%
     4：      
     ：                ；

2.CSS 3移行の使い方

transition: 1, 2, 3, 4
     1:
            transition-property:all        

     2：   transition-duration:      ：2s
     3：   transition-timing-function:    
                                    linear      
                                    ease    
                                    ease-in     
                                    ease-out    
                                    ease-in-out        
                                    cubic-bezier         

     4：  transition-delay:      2s

3.CSS 3 2 D変換の応用

 transform         

    translate(x,y):     
        x:    
        y:    

    scale(  ):       

    rotate(  ):          

    skew(x  ,y  ):      
            90deg ，  

    matrix()    
    matrix()       2D          。
    matrix()         ，      ，   ：  、  、        。
      X, tan(X ), tan(Y ),  Y,  X,  Y

例##グラデーション


<html>
<head>
    <meta charset="utf-8">
    <title>css3    title>
    <style type="text/css">
        /*    */
        div{width: 200px;height: 100px;margin-bottom: 50px;}

        div:nth-child(1){background: linear-gradient(to right,red,blue);}
        div:nth-child(2){background: radial-gradient(circle,red,blue);}
        div:nth-child(3){background: radial-gradient(ellipse,red,blue);}
        div:nth-child(4){background: repeating-radial-gradient(circle,red,blue);height: 200px;}
        div:nth-child(5){background: repeating-linear-gradient(to right,red,blue);}
        div:nth-child(6){background: repeating-radial-gradient(circle,red 20%,blue 40%,green 40%);}


    style>
head>
<body>
    <div>    div>
    <div>    --circlediv>
    <div>    --ellipsediv>
    <div>    --repeating-radial-gradientdiv>
    <div>    --repeating-linear-gradientdiv>
    <div>    ,          --repeating-radial-gradientdiv>
body>
html>

##アニメーション過剰


<html>
<head>
    <meta charset="utf-8">
    <title>    title>
head>
<body>
    <style type="text/css">
            div{width: 600px;height: 600px;background: #99f;position: relative;}
            div p{
                width: 20px;height: 20px;border-radius: 10px;background: #f99;position: absolute;left: 0;top:0;
                /*transition:2s ease all 2s;*/ opacity: 1;
                transition-property:all;
                transition-duration:2s;
                transition-delay:2s;
                transition-timing-function:ease-in-out;


            }
            div:hover p{left: 200px;top:500px;opacity: 0.2;}
    style>
body>
<div>
    <p>p>
div>
html>

2 d要素変換


<html>
<head>
    <meta charset="utf-8">
    <title>    title>
head>
<body>
    <style type="text/css">
            div{width: 600px;height: 600px;background: #99f;position: relative;}
            div p{
                width: 100px;height: 100px;background: #00f;
                /*transform: translate(100px,200px) scale(2) rotate(60deg) skew(20deg) ;*/
                transform:matrix(1,2,2,1,100,200);

            }

    style>
body>
<div>
    <p>p>
div>
html>

マルチスレッド(一):古典的な面接問題

UVA10817 Headmaster's Headache