當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3 变换、过渡效果、动画

發布時間：2023/11/30 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 变换、过渡效果、动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：周口看多囊卵巢综合症最好的医院推荐
下一篇：如何评价海信电视U7系列