css3 变换、过渡效果、动画

1 CSS3 选择器

1.1 基本选择器

1.2 层级

  • 空格

  • >

  • + .item+li

  • ~ .item~p

1.3 属性选择器

  • [attr]

  • [attr=value]

  • [attr^=value]

  • [attr$=value]

  • [attr*=value]

  • [][][]

1.4 伪类选择器

  • :link

  • :visited

  • :hover

  • :active

  • :focus

  • :first-child .list li:first-child

  • :last-child

  • :nth-child() 从1开始 odd even

  • :nth-last-child() 从1开始

  • :only-child li:only-child

  • :first-of-type

  • :last-of-type

  • nth-of-type()

  • nth-last-of-type()

  • only-of-type

<ul>
    <li></li>
    <li></li>
    <p></p>
    <li>li:nth-of-type(3) </li>
    <li></li>
    <li></li>
</ul>
​
li:nth-of-type(3)   #选择到
li:nth-child(3)   #没有满足条件的元素

1.5 伪元素选择器

  • ::before .item::before

  • ::after .clearfix::after {content:''; display:block; clear:both}

<div class="nav clearfix"> 
    子元素浮动
    [::after 此处是伪元素创建的]
</div>
​
​
<div class="banner">
</div>

  • ::first-letter

  • ::first-line

  • ::selection

  • ::placeholder ::placeholder {color:red} <input placeholder="请输入用户名">

 

2 CSS3 基础

2.1 新增颜色单位

  • rgba() 不透明0~1

2.2 新增长度单位

  • rem

  • vw

  • vh

 

3 新增的CSS3属性

3.1 边框圆角

border-radius 长度单位
border-top-left-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius

3.2 布局

display: 值很多很多 .... table table-row...
box-sizing: content-box（默认值） / border-box

3.3 外轮廓

outline:1px solid #ccc
outline-style
outline-color
outline-width

3.4 不透明度

opacity: 0~1

 

3.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>盒子阴影</title>
 6     <style>
 7         .item {
 8             display: inline-block;
 9             margin:20px;
10             width: 100px;
11             height: 100px;
12             border: 1px solid #999;
13         }
14 
15         .item01 {
16             box-shadow: 10px 10px;
17         }
18         .item02 {
19             box-shadow: 3px 3px #ccc;
20         }
21         .item03 {
22             /*大部分 需要设置这几个值*/
23             box-shadow: 10px 10px 10px #ccc;
24         }
25         .item04 {
26             /*外延值*/
27             box-shadow: 0px 0px 0px 120px #ccc;
28         }
29 
30         .item05 {
31             /*多重阴影*/
32             box-shadow: 0px 0px 3px 5px red,
33                         0px 0px 3px 10px orange,
34                         0px 0px 3px 15px yellow,
35                         0px 0px 3px 20px green,
36                         0px 0px 3px 25px cyan,
37                         0px 0px 3px 30px blue,
38                         0px 0px 3px 35px purple;
39         }
40     </style>
41 </head>
42 <body>
43     <h1>阴影</h1>
44     <hr>
45 
46 
47     <div class="item item01">01</div>
48     <div class="item item02">02</div>
49     <div class="item item03">03</div>
50     <div class="item item04">04</div>
51     <div class="item item05">05</div>
52     <div class="item item06">06</div>
53 
54     <hr>
55 
56     
57 </body>
58 </html>
阴影
 

3.5 背景

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景</title>
 6     <style>
 7         .item {
 8             /*display: block;*/
 9             width: 300px;
10             height: 300px;
11             border: 1px solid #ccc;
12             background: url("./images/meinv02.jpg") no-repeat;
13             
14             /*设置背景图片的尺寸*/
15             /*background-size: cover; 优先 铺满元素。 多余的图片裁掉 保证原图比例*/
16             /*background-size: contain; 优先 保证图片显示完整，可能元素不能铺满。 保证原图比例*/
17 
18             /*background-size:100px 200px;指定背景大小*/
19             /*background-size:100% 100%;*/
20 
21 
22             /*background: url('./images/meinv02.jpg') 10px 20px/cover;*/
23         }
24     </style>
25 </head>
26 <body>
27     <div class="item">
28         
29     </div>
30 </body>
31 </html>
背景

 

3.6 CSS3变换

  • transform

    translatex() 
    translatey()
    translate(x, y)
    rotate() 角度 deg
    skewx()  角度deg
    skewy()
    skew(x, y)

  • transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变换</title>
 6     <style>
 7         .box {
 8             display: inline-block;
 9             margin: 30px;
10             width: 100px;
11             height: 100px;
12             border:2px dashed orange;
13 
14             vertical-align: middle;
15         }
16         .item {
17             border: 1px solid #999;
18             background: #ccc;
19             height:99px;
20         }
21 
22         .item01 {
23             /*位移 移动*/
24             transform: translate(20px, 20px);
25             /*transform: translatex(10px) translatey(10px);*/
26             /*transform: translatey(10px);*/
27         }
28 
29         .item02 {
30             /*旋转 deg角度  0~360deg*/
31             transform: rotate(60deg)
32         }
33 
34         .item03 {
35             /*扭曲*/
36             transform: skewx(60deg) skewy(60deg);
37         }
38 
39         .content {
40             margin: 30px;
41             width: 100px;
42             height: 100px;
43             border: 1px solid #999;
44             transform: rotate(60deg);
45             transform-origin: left top;/*transform-origin 变换的原点*/
46         }
47     </style>
48 </head>
49 <body>
50     
51     <div class="box">
52         <div class="item item01"></div>
53     </div>
54 
55         <div class="box">
56         <div class="item item02">HELLO</div>
57     </div>
58     
59         <div class="box">
60         <div class="item item03">HELLO</div>
61     </div>
62     
63     <hr>
64 
65 
66     <div class="content">
67         HELLO
68     </div>
69 
70 </body>
71 </html>
变换

 

3.7 过渡效果

哪些CSS属性可以过渡

长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)
颜色
变换
纯数字 (opacity、z-index)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3过渡</title>
 6     <style>
 7         .box {
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             /*display: block;*/
12             /*visibility: visible;*/
13 
14             border:10px solid purple;
15 
16             
17             /*过渡*/
18             /* transition:3s; */
19             transition-property: width,height;
20             transition-duration: 5s;
21             transition-timing-function: ease;
22             transition-delay:3s;
23 
24 
25             transition: all ease 3s 1s;
26             transition: 4s;
27             transition: all 4s;
28 
29 
30         }
31         .box:hover {
32             /*display: none;*/
33             /*visibility: hidden;*/
34             width: 200px;
35             height: 200px;
36             background: green;
37 
38             border:20px dashed purple;
39 
40         }
41     </style>
42 </head>
43 <body>
44     <h1>transition</h1>
45     <hr>
46     <div class="box">
47         
48     </div>
49 
50     <hr>
51 
52     <p>
53         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore veritatis, ducimus maxime fugiat unde inventore aspernatur mollitia dolor doloribus facere eum libero repudiandae, quisquam, deserunt facilis magni error! Vero.
54     </p>
55 </body>
56 </html>
过渡
 

触发过渡

伪类触发  :hover  :focus  ....
媒体查询   @media
JS
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡实例</title>
 6     <style>
 7         .item {
 8             display: inline-block;
 9             width: 100px;
10             height: 100px;
11             border: 1px solid #ccc;
12             text-align: center;
13             line-height: 100px;
14             border-radius: 50px;
15             font-size:30px;
16             cursor:pointer;
17             color:#f66700;
18 
19             /*过渡*/
20             transition: transform 1s;
21         }
22 
23         .item:hover {
24             transform: rotate(360deg)
25         }
26     </style>
27 </head>
28 <body>
29     <h1>同志</h1>
30     <hr>
31 
32     <div class="list">
33         <div class="item">1</div>
34         <div class="item">2</div>
35         <div class="item">3</div>
36         <div class="item">4</div>
37         <div class="item">5</div>
38         <div class="item">6</div>
39         <div class="item">7</div>
40         <div class="item">8</div>
41     </div>
42 </body>
43 </html>
过渡实例
 

相关属性

transition-property  指定要过渡的属性 用,隔开。默认是 all
transition-duration  过渡持续时间
transition-timing-function  过渡线性效果  默认 ease
transition-delay   过渡延迟
transition：property timing-function duration delay

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>纯CSS实现下拉菜单</title>
  6     <style>
  7         * {
  8             padding: 0;
  9             margin: 0;
 10         }
 11         body {
 12             font:14px "Microsoft YaHei",sans-serif;
 13         }
 14         ul {
 15             list-style: none;
 16         }
 17         .container {
 18             margin: 0 auto;
 19             width: 1000px;
 20         }
 21 
 22         .nav {
 23             /*margin-top: 60px;*/
 24             width: 100%;
 25             height: 40px;
 26             line-height: 40px;
 27             background: #333;
 28         }
 29         
 30         /*一级菜单*/ /*该选择器会选择 所有li*/
 31         .nav li {
 32             float: left;
 33             position: relative;
 34         }
 35 
 36         /*一级菜单*/
 37         .nav li a {
 38             display: block;
 39             width: 100px;
 40             text-align: center;
 41             color: #fff;
 42             text-decoration: none;
 43         }
 44 
 45         /*二级菜单*/
 46         .nav li ul li a {
 47             color: #333;
 48         }
 49         .nav li ul li {
 50             /*覆盖前面设置  */
 51             float: none;
 52         }
 53         .nav li ul {
 54             /*border: 1px solid #ccc;
 55             border-top: none;*/
 56             background: #fff;
 57             /*二级菜单先隐藏*/
 58             /*display: none;
 59 */
 60             /*绝对定位*/
 61             position: absolute;
 62             left:0;
 63             top:;
 64             
 65             overflow: hidden;
 66             height: 0px;
 67 
 68             /*过渡*/
 69             transition: height .5s;
 70         }
 71 
 72         
 73         /*划过那个li 哪个li就变红*/
 74         .nav li:hover {
 75             background: red;
 76         }
 77         .nav li:hover ul{
 78         /*    display: block;*/
 79             height: 160px;
 80         }
 81 
 82         /*设置banner*/
 83         .banner img {
 84             width: 100%;
 85         }
 86     </style>
 87 </head>
 88 <body>
 89     
 90     <div class="nav">
 91         <div class="container">
 92             <ul>
 93                 <li><a href="#">首页</a></li>
 94                 <li>
 95                     <a href="#">博客</a>
 96                     <ul>
 97                         <li><a href="#">同志博客</a></li>
 98                         <li><a href="#">小同志博客</a></li>
 99                         <li><a href="#">老同志博客</a></li>
100                         <li><a href="#">大同志博客</a></li>
101                     </ul>
102                 </li>
103                 <li>
104                     <a href="#">论坛</a>
105                     <ul>
106                         <li><a href="#">同志论坛</a></li>
107                         <li><a href="#">红色论坛</a></li>
108                         <li><a href="#">黄色论坛</a></li>
109                         <li><a href="#">绿色论坛</a></li>
110                     </ul>
111                 </li>
112                 <li><a href="#">关于我们</a></li>
113                 <li>
114                     <a href="#">举报我们</a>
115                     <ul>
116                         <li><a href="#">涉黄</a></li>
117                         <li><a href="#">涉黑</a></li>
118                         <li><a href="#">涉赌</a></li>
119                         <li><a href="#">涉毒</a></li>
120                     </ul>
121                 </li>
122             </ul>
123         </div>
124     </div>
125 
126 
127     <div class="banner">
128         <img src="../../dist/images_one/meinv02.jpg" alt="">
129     </div>
130 </body>
131 </html>
导航-下拉菜单

 

3.8 CSS3动画

关键帧

@keyframes 动画名字 {
    0% {
        
    }
    20% {
        
    }
    40% {
        
    }
    100% {
        
    }
}

 

相关CSS属性

animation-name  指定动画的名字
animation-duration  动画的执行时间
animation-timing-function  执行效果速度  
animation-delay   延迟
animation-iteration-count   循环 次数  infinite(无限)
animation-direction:  alternate （正向 反向 交替）\ reverse（反向）
animation-play-state: running / paused
animation 复合属性

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3动画</title>
 6     <style>
 7         
 8         /*关键帧的语法*/
 9         @keyframes myanimate{
10             from {
11                 background: red;
12                 width:200px;
13             }
14 
15             50% {
16                 width:400px;
17             }
18 
19             to {
20                 background: green;
21                 width:600px;
22             }
23         }
24 
25         .box {
26             width: 200px;
27             height: 200px;
28             border: 2px dashed orange;
29 
30             animation-name: myanimate;
31             animation-duration: 1s; /*动画持续时间*/
32             animation-timing-function: linear;
33             animation-delay: 0s;
34             animation-iteration-count: infinite; /*无限循环*/
35             animation-direction: alternate; /*多次循环的时候，一次正向动画，一次反向动画*/
36 
37             animation-play-state: paused;
38 
39             animation: myanimate 2s linear 2 alternate;
40         }
41 
42         .box:hover {
43             animation-play-state: running;
44         }
45     </style>
46 </head>
47 <body>
48     
49     <div class="box"></div>
50 
51 
52 </body>
53 </html>
css3动画

 

 

 

posted @ 2018-08-06 21:39  Roc_Atlantis  阅读(771)  评论(0)  编辑  收藏  举报