【4858美高梅】CSS三集锦之新选拔择器

By admin in 4858美高梅 on 2019年4月3日

CSS3 transform变换

1、translate(x,y) 设置盒子位移
贰、scale(x,y) 设置盒子缩放
三、rotate(deg) 设置盒子旋转
四、skew(x-angle,y-angle) 设置盒子斜切
伍、perspective 设置透视距离
六、transform-style flat | preserve-叁d 设置盒子是不是按三d空间显得
7、translateX、translateY、translateZ 设置三个维度移动
8、rotateX、rotateY、rotateZ 设置三个维度旋转
九、scaleX、scaleY、scaleZ 设置三个维度缩放
10、tranform-origin 设置变形的中央点
1壹、backface-visibility 设置盒子背面是或不是可知

CSS三集锦之新选取择器、圆角、阴影、折射率、transition动画、transform变形、animation动画,css三transition

—苏醒内容起头—

—恢复生机内容开头—

—苏醒内容开端—

举例:(翻面效果)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>

一、CSS三新选拔择器

壹、CSS三新选用择器

1、CSS三新选用择器

CSS3 animation动画

壹、@keyframes 定义关键帧动画
二、animation-name 动画名称
3、animation-duration 动画时间
肆、animation-timing-function 动画曲线

  • linear 匀速
  • ease 初步和了结慢速
  • ease-in 开端是慢速
  • ease-out 甘休时慢速
  • ease-in-out 初步和终止时慢速
  • steps 动画步数

5、animation-delay 动画延迟
陆、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

  • normal 默许动画结束不回来
  • Alternate 动画截止后回去

八、animation-play-state 动画状态

  • paused 停止
  • running 运动

9、animation-fill-mode 动画前后的气象

  • none 不改动私下认可行为
  • forwards 当动画完结后,保持最终贰个属性值(在结尾1个首要帧中定义)
  • backwards 在 animation-delay
    所钦点的一段时间内,在动画显示在此以前,应用起来属性值(在第2个主要帧中定义)
  • both 向前和向后填充情势都被利用

拾、animation:name duration timing-function delay iteration-count
direction;同时设置八个属性

1、nth-chlid(n)用法

  selector:nth-chlid(n)指找到第n个子成分并且该因素为selector标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .box p,.main p{
12             background:red;
13             color:#fff;
14             margin-top:10px;
15         }
16         /*找到类为box下的第三个子元素并该元素为p标签的*/
17         .box p:nth-child(3){
18             background:gold;
19         }
20         .box p:nth-of-type(3){
21             background:gold;
22         }
23         /*找到类为main下的第三个子元素并该元素为div标签的*/
24         .main div:nth-child(3){
25             background: pink;
26         }
27         /*找到类为main下的第三个p标签*/
28         .main p:nth-of-type(3){
29             background:green;
30         }
31     </style>
32 </head>
33 <body>
34 <div class="box">
35     <p>段落1</p>
36     <p>段落2</p>
37     <p>段落3</p>
38     <p>段落4</p>
39     <p>段落5</p>
40     <p>段落6</p>
41 </div>
42 <div class="main">
43     <p>段落1</p>
44     <p>段落2</p>
45     <div>这是一个div</div>
46     <p>段落3</p>
47     <p>段落4</p>
48     <p>段落5</p>
49     <p>段落6</p>
50 </div>
51 </body>
52 </html>

1、nth-chlid(n)用法

  selector:nth-chlid(n)指找到第n个子成分并且该因素为selector标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .box p,.main p{
12             background:red;
13             color:#fff;
14             margin-top:10px;
15         }
16         /*找到类为box下的第三个子元素并该元素为p标签的*/
17         .box p:nth-child(3){
18             background:gold;
19         }
20         .box p:nth-of-type(3){
21             background:gold;
22         }
23         /*找到类为main下的第三个子元素并该元素为div标签的*/
24         .main div:nth-child(3){
25             background: pink;
26         }
27         /*找到类为main下的第三个p标签*/
28         .main p:nth-of-type(3){
29             background:green;
30         }
31     </style>
32 </head>
33 <body>
34 <div class="box">
35     <p>段落1</p>
36     <p>段落2</p>
37     <p>段落3</p>
38     <p>段落4</p>
39     <p>段落5</p>
40     <p>段落6</p>
41 </div>
42 <div class="main">
43     <p>段落1</p>
44     <p>段落2</p>
45     <div>这是一个div</div>
46     <p>段落3</p>
47     <p>段落4</p>
48     <p>段落5</p>
49     <p>段落6</p>
50 </div>
51 </body>
52 </html>

1、nth-chlid(n)用法

  selector:nth-chlid(n)指找到第n个子成分并且该因素为selector标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .box p,.main p{
12             background:red;
13             color:#fff;
14             margin-top:10px;
15         }
16         /*找到类为box下的第三个子元素并该元素为p标签的*/
17         .box p:nth-child(3){
18             background:gold;
19         }
20         .box p:nth-of-type(3){
21             background:gold;
22         }
23         /*找到类为main下的第三个子元素并该元素为div标签的*/
24         .main div:nth-child(3){
25             background: pink;
26         }
27         /*找到类为main下的第三个p标签*/
28         .main p:nth-of-type(3){
29             background:green;
30         }
31     </style>
32 </head>
33 <body>
34 <div class="box">
35     <p>段落1</p>
36     <p>段落2</p>
37     <p>段落3</p>
38     <p>段落4</p>
39     <p>段落5</p>
40     <p>段落6</p>
41 </div>
42 <div class="main">
43     <p>段落1</p>
44     <p>段落2</p>
45     <div>这是一个div</div>
46     <p>段落3</p>
47     <p>段落4</p>
48     <p>段落5</p>
49     <p>段落6</p>
50 </div>
51 </body>
52 </html>

比喻:(人物走路动画)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

 

2、nth-last-chlid(n)用法

  selector:nth-last-chlid(n)指找到尾数第n个子成分并且该因素为selector标签

2、nth-last-chlid(n)用法

【4858美高梅】CSS三集锦之新选拔择器。  selector:nth-last-chlid(n)指找到倒数第n个子成分并且该因素为selector标签

2、nth-last-chlid(n)用法

  selector:nth-last-chlid(n)指找到尾数第n个子成分并且该因素为selector标签

4858美高梅 ,3、selector:enabled可用的表单控件

三、selector:enabled可用的表单控件

三、selector:enabled可用的表单控件

四、selector:disabled不可用的表单控件

 1 <style>   
 2   input:disabled{
 3       background:red;
 4   }
 5   input:enabled{
 6      background:gold;
 7    }
 8   /*选择复选框,紧邻文字变为空色*/
 9    input:checked + label{
10      color:red;
11    }
12 </style>
13 <body>
14     <form>
15          <input type="text" placeholder="请输入用户名" disabled>
16         <input type="password" placeholder="请输入密码">
17         <input type="checkbox"><label>记住用户名</label>  
18      </form>   
19 </body>

四、selector:disabled不可用的表单控件

 1 <style>   
 2   input:disabled{
 3       background:red;
 4   }
 5   input:enabled{
 6      background:gold;
 7    }
 8   /*选择复选框,紧邻文字变为空色*/
 9    input:checked + label{
10      color:red;
11    }
12 </style>
13 <body>
14     <form>
15          <input type="text" placeholder="请输入用户名" disabled>
16         <input type="password" placeholder="请输入密码">
17         <input type="checkbox"><label>记住用户名</label>  
18      </form>   
19 </body>

四、selector:disabled不可用的表单控件

 1 <style>   
 2   input:disabled{
 3       background:red;
 4   }
 5   input:enabled{
 6      background:gold;
 7    }
 8   /*选择复选框,紧邻文字变为空色*/
 9    input:checked + label{
10      color:red;
11    }
12 </style>
13 <body>
14     <form>
15          <input type="text" placeholder="请输入用户名" disabled>
16         <input type="password" placeholder="请输入密码">
17         <input type="checkbox"><label>记住用户名</label>  
18      </form>   
19 </body>

伍、E>F  E成分下的首先层子集

伍、E>F  E成分下的第2层子集

5、E>F  E成分下的率先层子集

6、E~F E成分前面包车型客车小兄弟成分

6、E~F E成分后边的男人儿成分

6、E~F E元素后边的弟兄成分

7、E+F 紧挨着的男生成分

7、E+F 紧挨着的兄弟成分

柒、E+F 紧挨着的小兄弟成分

八、属性选取器 E[data-attr]蕴涵data-attr属性的要素

  a、E[data-attr=’ok’] 含有data-attr属性的因素且它的值为”ok”;

  b、E[data-attr^=’ok’]包罗data-attr属性的因素且它的值发轫含有”ok”;**

**  c、E[data-attr$=’ok’]含蓄data-attr属性的因素且它的值结尾含有”ok”;**

**  d、E[data-attr*=’ok’]富含data-attr属性的成分且它的值中涵盖”ok”;**

eg  div[data-attr = “ok”]{

  color:red;

}

8、属性选用器 E[data-attr]含有data-attr属性的因素

  a、E[data-attr=’ok’]
含有data-attr属性的因素且它的值为”ok”;

  b、E[data-attr^=’ok’]涵盖data-attr属性的成分且它的值开端含有”ok”;**

**  c、E[data-attr$=’ok’]含有data-attr属性的成分且它的值结尾含有”ok”;**

**  d、E[data-attr*=’ok’]饱含data-attr属性的成分且它的值中隐含”ok”;**

eg  div[data-attr = “ok”]{

  color:red;

}

八、属性选拔器 E[data-attr]带有data-attr属性的因素

  a、E[data-attr=’ok’]
含有data-attr属性的成分且它的值为”ok”;

  b、E[data-attr^=’ok’]饱含data-attr属性的要素且它的值开首含有”ok”;**

**  c、E[data-attr$=’ok’]包蕴data-attr属性的要素且它的值结尾含有”ok”;**

**  d、E[data-attr*=’ok’]含蓄data-attr属性的要素且它的值中包括”ok”;**

eg  div[data-attr = “ok”]{

  color:red;

}

二、CSS3圆角

二、CSS3圆角

二、CSS3圆角

一、设置某1个角的圆角:border-radius:左上角 右上角 右下角 左下角;

  比如设置左上角的圆角:border-top-left-radius:30px 60px;

一、设置某3个角的圆角:border-radius:左上角 右上角 右下角 左下角;

  比如设置左上角的圆角:border-top-left-radius:30px 60px;

一、设置某3个角的圆角:border-radius:左上角 右上角 右下角 左下角;

  比如设置左上角的圆角:border-top-left-radius:30px 60px;

二、同时设置多个角:border-radius:30px 20px 拾px 50px;

2、同时安装多个角:border-radius:30px 20px 10px 50px;

二、同时设置多个角:border-radius:30px 20px 十px 50px;

3、设置七个角相同(常用):border-radius:五分之一;border-radius:3/陆;(是正圆)

三、设置八个角相同(常用):border-radius:百分之二十;border-radius:一半;(是正圆)

3、设置多少个角相同(常用):border-radius:伍分一;border-radius:十分之五;(是正圆)

三、CSS3阴影

三、CSS3阴影

三、CSS3阴影

1、box-shadow:水平偏移  垂直偏移  羽化大小  增添大小  颜色  是还是不是内阴影

注:正值向右偏移,向下偏移,暗许为外阴影

box-shadow:10px 5px 20px 2px pink;

4858美高梅 1

如果做内阴影的话,可以把偏移量设为0
box-shadow:0 0 20px 2px red inset;

 4858美高梅 2

1、box-shadow:水平偏移  垂直偏移  羽化大小  扩充大小  颜色  是或不是内阴影

注:正值向右偏移,向下偏移,暗中同意为外阴影

box-shadow:10px 5px 20px 2px pink;

4858美高梅 3

如果做内阴影的话,可以把偏移量设为0
box-shadow:0 0 20px 2px red inset;

 4858美高梅 4

一、box-shadow:水平偏移  垂直偏移  羽化大小  扩大大小  颜色  是不是内阴影

注:正值向右偏移,向下偏移,暗中认可为外阴影

box-shadow:10px 5px 20px 2px pink;

4858美高梅 5

如果做内阴影的话,可以把偏移量设为0
box-shadow:0 0 20px 2px red inset;

 4858美高梅 6

4、CSS三 反射率rgba(新的颜色值表示法)

四、CSS3 反射率rgba(新的颜色值表示法)

4、CSS三 发光度rgba(新的颜色值表示法)

一、盒子折射率表示法:opacity:0.一;filter:alpha(opacity=十)(包容IE)

二、rgba(0,0,0,0.壹) 前多个数值表示颜色,第多个数值表示颜色的反射率

4858美高梅 74858美高梅 84858美高梅 9

1、盒子发光度表示法:opacity:0.壹;filter:阿尔法(opacity=10)(包容IE)

2、rgba(0,0,0,0.一)
前多个数值表示颜色,第多个数值表示颜色的折射率

4858美高梅 104858美高梅 114858美高梅 12

一、盒子光滑度表示法:opacity:0.1;filter:alpha(opacity=10)(包容IE)

二、rgba(0,0,0,0.一)
前八个数值表示颜色,第7个数值表示颜色的折射率

4858美高梅 134858美高梅 144858美高梅 15

伍、transition过渡动画 (要求接触)

伍、transition过渡动画 (必要接触)

伍、transition过渡动画 (须求接触)

transition:过渡性质  时间  运动格局  动画延迟

transition:过渡性质  时间  运动格局  动画延迟

transition:过渡性质  时间  运动方式  动画延迟

1、transition-property  设置过渡的天性,比如:width  height  background-color(是在小幅上做动画照旧在中度上亦可能背景上)

1、transition-property  设置过渡的属性,比如:width  height  background-color(是在增进率上做动画依旧在高度上亦大概背景上)

一、transition-property  设置过渡的属性,比如:width  height  background-color(是在步长上做动画还是在中度上亦大概背景上)

二、transition-duration  设置过渡的时日,比如:一s  500ms

二、transition-duration  设置过渡的时光,比如:①s  500ms

二、transition-duration  设置过渡的年月,比如:1s  500ms

3、transition-time-function  设置过渡的运动格局

  a、linear  匀速

  b、ease  起首和了结慢速

  c、ease-in  开头时慢速

  d、ease-out  截至时慢速

  e、ease-in-out 开端和了结时慢速

三、transition-time-function  设置过渡的运动情势

  a、linear
 匀速

  b、ease  最先和结束慢速

  c、ease-in  开始时慢速

  d、ease-out  甘休时慢速

  e、ease-in-out 起先和截至时慢速

三、transition-time-function  设置过渡的运动方式

  a、linear
 匀速

  b、ease  起先和终结慢速

  c、ease-in  开端时慢速

  d、ease-out  甘休时慢速

  e、ease-in-out 开头和竣事作时间慢速

4、transition-delay  设置动画的延期

4、transition-delay  设置动画的推迟

四、transition-delay  设置动画的延期

4858美高梅 16

4858美高梅 17

4858美高梅 18

塑造图纸文字遮罩

4858美高梅 19

制作图纸文字遮罩

4858美高梅 20

创设图纸文字遮罩

4858美高梅 21

陆、transform变换(1般协作transition使用,有个连片效果未必太突然)

6、transform变换(一般同盟transition使用,有个对接效果不见得太突然)

6、transform变换(一般合作transition使用,有个接入效果不见得太意料之外)

一、translate(x,y) 设置盒子位移    如:transform:translate(200px,300px);

1、translate(x,y) 设置盒子位移    如:transform:translate(200px,300px);

一、translate(x,y) 设置盒子位移    如:transform:translate(200px,300px);

2、scale(x,y) 设置盒子缩放          如:transform:scale(一.2,一);

2、scale(x,y) 设置盒子缩放          如:transform:scale(一.2,一);

二、scale(x,y) 设置盒子缩放          如:transform:scale(1.二,一);

三、rotate(deg) 设置盒子旋转        如:transform:rotate(360deg);

叁、rotate(deg) 设置盒子旋转        如:transform:rotate(360deg);

三、rotate(deg) 设置盒子旋转        如:transform:rotate(360deg);

4、skew(x-angle,y-angle) 设置盒子倾斜     如:transform:skew(20deg,30deg);

四、skew(x-angle,y-angle) 设置盒子倾斜     如:transform:skew(20deg,30deg);

4、skew(x-angle,y-angle) 设置盒子倾斜     如:transform:skew(20deg,30deg);

5、perspective 设置透视距离(近大远小) 如:transform:perspective(800px) rotateX(30deg);

伍、perspective 设置透视距离(近大远小) 如:transform:perspective(800px) rotateX(30deg);

5、perspective 设置透视距离(近大远小) 如:transform:perspective(800px) rotateX(30deg);

陆、transform-style flat| preserve-三d 设置盒子是不是按三d空间显得  如:transform-style:preserve-三d;

6、transform-style flat| preserve-3d 设置盒子是不是按叁d空间显得  如:transform-style:preserve-三d;

陆、transform-style flat| preserve-三d 设置盒子是或不是按三d空间显得  如:transform-style:preserve-3d;

七、translateX、translateY、rotateZ 设置三个维度移动

七、translateX、translateY、rotateZ 设置三个维度移动

7、translateX、translateY、rotateZ 设置三维移动

八、rotateX、rotateY、rotateZ 设置三个维度旋转

八、rotateX、rotateY、rotateZ 设置三个维度旋转

八、rotateX、rotateY、rotateZ 设置三个维度旋转

玖、scaleX、scaleY、scaleZ 设置三个维度缩放

玖、scaleX、scaleY、scaleZ 设置三个维度缩放

九、scaleX、scaleY、scaleZ 设置三个维度缩放

10、transform-origin 设置变形的中坚点  如:transform-origin:left top;transform-origin:20px 50px;

拾、transform-origin 设置变形的为主点  如:transform-origin:left top;transform-origin:20px 50px;

拾、transform-origin 设置变形的主干点  如:transform-origin:left top;transform-origin:20px 50px;

1一、backface-visibility 设置盒子背面是还是不是可知  如:backface-visibility:hidden;

4858美高梅 22

11、backface-visibility 设置盒子背面是不是可知  如:backface-visibility:hidden;

4858美高梅 23

1一、backface-visibility 设置盒子背面是或不是可知  如:backface-visibility:hidden;

4858美高梅 24

例:翻面效果(正面是图形,鼠标点击图片之后,会扭曲180度背面现身文字表明)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>翻面效果</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .con{
12             width:200px;
13             height:144px;
14             border:1px solid #ccc;
15             margin:100px auto;
16             position: relative;
17             transform-style: preserve-3d;
18             transform:perspective(800px) rotateY(0deg);
19         }
20         .pic,.info{
21             width:200px;
22             height:144px;
23             position:absolute;
24             left:0;
25             top:0;
26             transform:perspective(800px) rotateY(0deg);
27             backface-visibility: hidden;
28             transition:all 500ms ease;
29         }
30         .info{
31             background:gold;
32             text-align: center;
33             line-height: 144px;
34             backface-visibility: hidden;
35             transform:translateZ(2px) rotateY(180deg);
36         }
37         .con:hover .pic{
38             transform:perspective(800px) rotateY(180deg);
39         }
40         .con:hover .info{
41             transform:perspective(800px) rotateY(0deg);
42         }
43     </style>
44 </head>
45 <body>
46     <div class="con">
47         <div class="pic">
48             <img src="../images/furit_01.jpg" alt="4858美高梅 25">
49         </div>
50         <p class="info">图片文字说明</p>
51     </div>
52 </body>
53 </html>

例:翻面效果(正面是图片,鼠标点击图片之后,会扭曲180度背面出现文字表达)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>翻面效果</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .con{
12             width:200px;
13             height:144px;
14             border:1px solid #ccc;
15             margin:100px auto;
16             position: relative;
17             transform-style: preserve-3d;
18             transform:perspective(800px) rotateY(0deg);
19         }
20         .pic,.info{
21             width:200px;
22             height:144px;
23             position:absolute;
24             left:0;
25             top:0;
26             transform:perspective(800px) rotateY(0deg);
27             backface-visibility: hidden;
28             transition:all 500ms ease;
29         }
30         .info{
31             background:gold;
32             text-align: center;
33             line-height: 144px;
34             backface-visibility: hidden;
35             transform:translateZ(2px) rotateY(180deg);
36         }
37         .con:hover .pic{
38             transform:perspective(800px) rotateY(180deg);
39         }
40         .con:hover .info{
41             transform:perspective(800px) rotateY(0deg);
42         }
43     </style>
44 </head>
45 <body>
46     <div class="con">
47         <div class="pic">
48             <img src="..urit_01.jpg" alt="4858美高梅 26">
49         </div>
50         <p class="info">图片文字说明</p>
51     </div>
52 </body>
53 </html>

例:翻面效果(正面是图表,鼠标点击图片之后,会扭曲180度背面出现文字表达)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>翻面效果</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .con{
12             width:200px;
13             height:144px;
14             border:1px solid #ccc;
15             margin:100px auto;
16             position: relative;
17             transform-style: preserve-3d;
18             transform:perspective(800px) rotateY(0deg);
19         }
20         .pic,.info{
21             width:200px;
22             height:144px;
23             position:absolute;
24             left:0;
25             top:0;
26             transform:perspective(800px) rotateY(0deg);
27             backface-visibility: hidden;
28             transition:all 500ms ease;
29         }
30         .info{
31             background:gold;
32             text-align: center;
33             line-height: 144px;
34             backface-visibility: hidden;
35             transform:translateZ(2px) rotateY(180deg);
36         }
37         .con:hover .pic{
38             transform:perspective(800px) rotateY(180deg);
39         }
40         .con:hover .info{
41             transform:perspective(800px) rotateY(0deg);
42         }
43     </style>
44 </head>
45 <body>
46     <div class="con">
47         <div class="pic">
48             <img src="..urit_01.jpg" alt="4858美高梅 27">
49         </div>
50         <p class="info">图片文字说明</p>
51     </div>
52 </body>
53 </html>

七、CSS叁 animation动画(直接进行动画,不必要接触)

7、CSS三 animation动画(直接开始展览动画,不须要接触)

七、CSS三 animation动画(直接实行动画,不须要接触)

animation:动画名称 动画持续时间 动画活动格局 动画起来延迟时间 动画应用次数 动画停止后是不是按原路重回 动画前后的情景;同时设置三个属性

animation:动画名称 动画持续时间 动画活动情势 动画起来延迟时间 动画应用次数 动画停止后是不是按原路再次来到 动画前后的景况;同时设置八个属性

animation:动画名称 动画持续时间 动画活动格局 动画肇始延迟时间 动画应用次数 动画结束后是或不是按原路重临 动画前后的意况;同时安装5本性情

如:animation:moving 1s ease 1s 6 alternate forwards;

 

如:animation:moving 1s ease 1s 6 alternate forwards;

 

如:animation:moving 1s ease 1s 6 alternate forwards;

 

1、@keyframes 定义关键帧动画  

如:@keyframes  动画名{

    from{属性:属性值}

    to{属性:属性值}

}

一、@keyframes 定义关键帧动画  

如:@keyframes  动画名{

    from{属性:属性值}

    to{属性:属性值}

}

壹、@keyframes 定义关键帧动画  

如:@keyframes  动画名{

    from{属性:属性值}

    to{属性:属性值}

}

二、animation-name  动画名称

二、animation-name  动画名称

二、animation-name  动画名称

3、animation-duration  动画时间

叁、animation-duration  动画时间

三、animation-duration  动画时间

四、animation-timing-function 动画曲线

  a、linear  匀速

  b、ease  开头和终结慢速

  c、ease-in  开端时慢速

  d、ease-out  截止时慢速

  e、ease-in-out 早先和终结时慢速

  f、steps 动画步数

肆、animation-timing-function 动画曲线

  a、linear  匀速

  b、ease  起首和竣事慢速

  c、ease-in  发轫时慢速

  d、ease-out  停止时慢速

  e、ease-in-out 开首和完工作时间慢速

  f、steps 动画步数

四、animation-timing-function 动画曲线

  a、linear  匀速

  b、ease  早先和了结慢速

  c、ease-in  开首时慢速

  d、ease-out  结束时慢速

  e、ease-in-out 开首和终止时慢速

  f、steps 动画步数

5、animation-delay 动画延迟

伍、animation-delay 动画延迟

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

陆、animation-iteration-count 动画播放次数 n|infinite

陆、animation-iteration-count 动画播放次数 n|infinite

柒、animation-direction:normal 暗许动画甘休不回去/alternate 动画停止后回到

7、animation-direction:normal 私下认可动画甘休不回来/alternate 动画截止后回来

七、animation-direction:normal 暗中认可动画结束不回去/alternate 动画停止后回到

8、animation-play-state 动画状态

  a、paused 停止

  b、running 运动

八、animation-play-state 动画状态

  a、paused 停止

  b、running 运动

八、animation-play-state 动画状态

  a、paused 停止

  b、running 运动

玖、animation-fill-mode  动画前后的情状

  a、none 不更改私下认可行为

  b、forwards
当动画落成后,保持最终八个属性值(在终极1个根本帧中定义)

  c、 backwards
在animation-delay所钦定的一段时间内,在动画展现从前,应用起来属性值(在首先个重点帧中定义)

 4858美高梅 28

4858美高梅 29

九、animation-fill-mode  动画前后的意况

  a、none 不改动默许行为

  b、forwards
当动画实现后,保持最终贰个属性值(在结尾1个重点帧中定义)

  c、 backwards
在animation-delay所内定的一段时间内,在动画展现此前,应用起来属性值(在第贰个不能缺少帧中定义)

 4858美高梅 30

4858美高梅 31

玖、animation-fill-mode  动画前后的境况

  a、none 不更改暗许行为

  b、forwards
当动画实现后,保持最后二个属性值(在最终三个根本帧中定义)

  c、 backwards
在animation-delay所钦定的壹段时间内,在动画呈现在此以前,应用起来属性值(在首先个首要帧中定义)

 4858美高梅 32

4858美高梅 33

 例:loding动画,代码如下:

4858美高梅 34

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Loading动画</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .con{
12             width:300px;
13             height:100px;
14             margin:50px auto;
15             border:1px solid #ccc;
16             position: relative;
17         }
18         .con div{
19             width:30px;
20             height:50px;
21             background:gold;
22             margin:15px;
23             float:left;
24             border-radius: 10px;;
25         }
26         .con p{
27             position: absolute;
28             left:0;
29             bottom:0;
30             width:100%;
31             text-align: center;
32         }
33         .con div:nth-child(1){
34             background:red;
35             animation:loading 500ms ease 0s infinite alternate;
36         }
37         .con div:nth-child(2){
38             background:orangered;
39             animation:loading 500ms ease 100ms infinite alternate;
40 
41         }
42         .con div:nth-child(3){
43             background: blue;
44             animation:loading 500ms ease 200ms infinite alternate;
45 
46         }
47         .con div:nth-child(4){
48             background: green;
49             animation:loading 500ms ease 300ms infinite alternate;
50 
51         }
52         .con div:nth-child(5){
53             background: cyan;
54             animation:loading 500ms ease 400ms infinite alternate;
55 
56         }
57         @keyframes loading {
58             from{
59                 transform:scale(1);
60             }
61             to{
62                 transform: scale(0.5);
63             }
64         }
65     </style>
66 </head>
67 <body>
68     <div class="con">
69         <div></div>
70         <div></div>
71         <div></div>
72         <div></div>
73         <div></div>
74         <p>Loading...</p>
75     </div>
76 </body>
77 </html>

 例:loding动画,代码如下:

4858美高梅 35

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Loading动画</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .con{
12             width:300px;
13             height:100px;
14             margin:50px auto;
15             border:1px solid #ccc;
16             position: relative;
17         }
18         .con div{
19             width:30px;
20             height:50px;
21             background:gold;
22             margin:15px;
23             float:left;
24             border-radius: 10px;;
25         }
26         .con p{
27             position: absolute;
28             left:0;
29             bottom:0;
30             width:100%;
31             text-align: center;
32         }
33         .con div:nth-child(1){
34             background:red;
35             animation:loading 500ms ease 0s infinite alternate;
36         }
37         .con div:nth-child(2){
38             background:orangered;
39             animation:loading 500ms ease 100ms infinite alternate;
40 
41         }
42         .con div:nth-child(3){
43             background: blue;
44             animation:loading 500ms ease 200ms infinite alternate;
45 
46         }
47         .con div:nth-child(4){
48             background: green;
49             animation:loading 500ms ease 300ms infinite alternate;
50 
51         }
52         .con div:nth-child(5){
53             background: cyan;
54             animation:loading 500ms ease 400ms infinite alternate;
55 
56         }
57         @keyframes loading {
58             from{
59                 transform:scale(1);
60             }
61             to{
62                 transform: scale(0.5);
63             }
64         }
65     </style>
66 </head>
67 <body>
68     <div class="con">
69         <div></div>
70         <div></div>
71         <div></div>
72         <div></div>
73         <div></div>
74         <p>Loading...</p>
75     </div>
76 </body>
77 </html>

 例:loding动画,代码如下:

4858美高梅 36

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Loading动画</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .con{
12             width:300px;
13             height:100px;
14             margin:50px auto;
15             border:1px solid #ccc;
16             position: relative;
17         }
18         .con div{
19             width:30px;
20             height:50px;
21             background:gold;
22             margin:15px;
23             float:left;
24             border-radius: 10px;;
25         }
26         .con p{
27             position: absolute;
28             left:0;
29             bottom:0;
30             width:100%;
31             text-align: center;
32         }
33         .con div:nth-child(1){
34             background:red;
35             animation:loading 500ms ease 0s infinite alternate;
36         }
37         .con div:nth-child(2){
38             background:orangered;
39             animation:loading 500ms ease 100ms infinite alternate;
40 
41         }
42         .con div:nth-child(3){
43             background: blue;
44             animation:loading 500ms ease 200ms infinite alternate;
45 
46         }
47         .con div:nth-child(4){
48             background: green;
49             animation:loading 500ms ease 300ms infinite alternate;
50 
51         }
52         .con div:nth-child(5){
53             background: cyan;
54             animation:loading 500ms ease 400ms infinite alternate;
55 
56         }
57         @keyframes loading {
58             from{
59                 transform:scale(1);
60             }
61             to{
62                 transform: scale(0.5);
63             }
64         }
65     </style>
66 </head>
67 <body>
68     <div class="con">
69         <div></div>
70         <div></div>
71         <div></div>
72         <div></div>
73         <div></div>
74         <p>Loading...</p>
75     </div>
76 </body>
77 </html>

 八、CSS三浏览器样式前缀

 8、CSS叁浏览器样式前缀

 8、CSS三浏览器样式前缀

 一、为了让CSS三样式包容,须要将壹些样式加上浏览器前缀

 一、为了让CSS3样式包容,必要将或多或少样式加上浏览器前缀

 一、为了让CSS三样式包容,须要将或多或少样式加上浏览器前缀

a、-ms- 兼容IE浏览器

a、-ms- 兼容IE浏览器

a、-ms- 兼容IE浏览器

b、-moz- 兼容firefox

b、-moz- 兼容firefox

b、-moz- 兼容firefox

c、-o- 兼容opera

c、-o- 兼容opera

c、-o- 兼容opera

d、-webkit- 兼容chrome和safari

 4858美高梅 37

d、-webkit- 兼容chrome和safari

 4858美高梅 38

d、-webkit- 兼容chrome和safari

 4858美高梅 39

二、Sublime text编辑器自动抬高浏览器前缀

时下,有些CSS三属性须要加前缀,某些不要求加,有些只需求加1部分,这个加前缀的行事能够提交插件来完成,比如安装autoprefixer
Sublime text中安装autoprefixer
  a、在preferences/key Bindings-Users
    设置火速键{“key”:[“ctrl+alt+x”],”command”:”autoprefixed”}通过此工具得以依据最新的前缀使用情况给样式自动加前缀
    表达:last 七 versions:最新的浏览器的柒个本子
    cascade:缩进美化属性值
  b、在preferences/package setting>autoprefixer>setting-user{
    ”browsers”:[“last 7 versions”],
    ”cascade”:true,
    ”remove”:true
  }

—苏醒内容伊始— 一、CSS3新增选取器…

二、Sublime text编辑器自动抬高浏览器前缀

当前,有个别CSS三属性必要加前缀,有个别不须要加,某个只需求加壹有的,这个加前缀的做事得以交到插件来成功,比如安装autoprefixer
Sublime text中安装autoprefixer
  a、在preferences/key Bindings-Users
    设置快捷键{“key”:[“ctrl+alt+x”],”command”:”autoprefixed”}通过此工具得以遵照新型的前缀使用状态给样式自动加前缀
    表明:last 七 versions:最新的浏览器的玖个本子
    cascade:缩进美化属性值
  b、在preferences/package setting>autoprefixer>setting-user{
    ”browsers”:[“last 7 versions”],
    ”cascade”:true,
    ”remove”:true
  }

2、Sublime text编辑器自动抬高浏览器前缀

日前,有个别CSS3属性须求加前缀,某些不需求加,某个只供给加一有的,那几个加前缀的行事能够付出插件来落成,比如安装autoprefixer
Sublime text中安装autoprefixer
  a、在preferences/key Bindings-Users
    设置连忙键{“key”:[“ctrl+alt+x”],”command”:”autoprefixed”}通过此工具得以依据最新的前缀使用景况给样式自动加前缀
    表明:last 七 versions:最新的浏览器的七个本子
    cascade:缩进美化属性值
  b、在preferences/package setting>autoprefixer>setting-user{
    ”browsers”:[“last 7 versions”],
    ”cascade”:true,
    ”remove”:true
  }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有