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 新增長度單位

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% {
 ? ? ? ?
 ? }
}

css3 變換、過渡效果、動畫

1 CSS3 選擇器

1.1 基本選擇器

1.2 層級

1.3 屬性選擇器

1.4 偽類選擇器

1.5 偽元素選擇器

2 CSS3 基礎

2.1 新增顏色單位

2.2 新增長度單位

3 新增的CSS3屬性

3.1 邊框圓角

3.2 布局

3.3 外輪廓

3.4 不透明度

3.5 陰影

3.5 背景

3.6 CSS3變換

3.7 過渡效果

哪些CSS屬性可以過渡

觸發過渡

相關屬性

3.8 CSS3動畫

關鍵幀

相關CSS屬性

相關文章