CSS3集锦之新增选择器、圆角、阴影、透明度、

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画,css3transition

---恢复内容开始---

举例:(翻面效果)

<!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>

一、CSS3新增选择器

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • steps 动画步数

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

  • normal 默认动画结束不返回
  • Alternate 动画结束后返回

8、animation-play-state 动画状态

  • paused 停止
  • running 运动

9、animation-fill-mode 动画前后的状态

  • none 不改变默认行为
  • forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
  • backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
  • both 向前和向后填充模式都被应用

10、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>

举例:(人物走路动画)

<!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标签

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

4、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>

5、E>F  E元素下的第一层子集

6、E~F E元素后面的兄弟元素

7、E+F 紧挨着的兄弟元素

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;

}

二、CSS3圆角

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

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

2、同时设置四个角:border-radius:30px 20px 10px 50px;

3、设置四个角相同(常用):border-radius:20%;border-radius:50%;(是正圆)

三、CSS3阴影

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

注:正值向右偏移,向下偏移,默认为外阴影

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

图片 1

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

 图片 2

四、CSS3 透明度rgba(新的颜色值表示法)

1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE)

2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

图片 3图片 4图片 5

五、transition过渡动画 (需要触发)

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

1、transition-property  设置过渡的属性,比如:width  height  background-color(是在宽度上做动画还是在高度上亦或是背景上)

2、transition-duration  设置过渡的时间,比如:1s  500ms

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

  a、linear  匀速

  b、ease  开始和结束慢速

  c、ease-in  开始时慢速

  d、ease-out  结束时慢速

  e、ease-in-out 开始和结束时慢速

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

图片 6

制作图片文字遮罩

图片 7

六、transform变换(一般配合transition使用,有个过渡效果不至于太突兀)

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

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

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

本文由金沙官网线上发布于Web前端,转载请注明出处:CSS3集锦之新增选择器、圆角、阴影、透明度、

您可能还会对下面的文章感兴趣: