個人 CSS3 筆記
1. CSS3 選擇器
2. CSS3屬性
一、position屬性
定義和用法：position 屬性規定元素的定位類型。css
說明：這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。html
可能的值：web
瀏覽器支持：全部主流瀏覽器都支持 position 屬性。canvas
註釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
瀏覽器
2.css的z-index屬性bash
定義和用法：z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。app
註釋：元素可擁有負的 z-index 屬性值。ide
註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！佈局
說明：該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。若是爲正數，則離用戶更近，爲負數則表示離用戶更遠。動畫
可能的值：
瀏覽器支持：全部主流瀏覽器都支持 z-index 屬性。
註釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
二、box-shadow 屬性
box-shadow 屬性向框添加一個或多個陰影。
語法：box-shadow: h-shadow v-shadow blur spread color inset;
三、pointer-events
pointer-events屬性值詳解
- auto——效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。
- none——元素再也不是鼠標事件的目標，鼠標再也不監聽當前層而去監聽下面的層中的元素。可是若是它的子元素設置了pointer-events爲其它值，好比auto，鼠標仍是會監聽這個子元素的。
- 其它屬性值爲SVG專用，這裏再也不多介紹了。
pointer-events: none;
可讓某個元素實現相似於海市蜃樓的效果，具體理解爲，你能夠看的到某個元素，可是你沒法摸的着。而 display：none; 是你摸不着，也看不見。
若是把某個元素再加上opacity：0；則能夠很容易實現相似display:none；的效果（摸不着，看不見）。
更多用法請查看 pointer-events: none; 忽略某一層的存在
3. C33 的 2D和3D 轉換
2D 轉換包括：平移，旋轉，縮放，偏轉
<style>
/*transform 表示要進行2d轉換了 平移，旋轉，縮放，偏轉 */
.box{
width: 800px;
height: 650px;
background-color: #ccc;
margin: 200px auto;
}
img{
transition: all 2s;
/*transform-origin: left center;*/
/*改變中心旋轉點，left,center,right,top，center，bottom*/
}
img:hover{
/*平移，兩個值，一個水平位置，一個垂直位置， 平移後仍然佔位置，是平移前的位置*/
/*-webkit-transform: translate(100px,100px)*/
/*旋轉，方向是順時針，中心點是正中心*/
/*-webkit-transform:rotate(360deg);*/
/*偏轉，第一個值水平偏轉方向，第二個值垂直偏轉方向*/
/*-webkit-transform:skew(180deg,360deg);*/
/*縮放，第一個值水平縮放倍數，第二值垂直縮放倍數，可用於鼠標通過時放大*/
/*-webkit-transform:scale(2,2);*/
/*若是要想添加多個2D轉化，用空格隔開*/
/*先平移，後旋轉*/
/*-webkit-transform:translate(300px,0) rotate(180deg);*/
}
</style>
<div class="box">
<img src="images/gl.jpg" alt="">
</div>複製代碼
瀏覽器兼容性的處理，好比：
-webkit-transform，-moz-transform，-ms-transform，-o-transform
CSS3 的 3D 轉換
<style>
.box{
width: 600px;
margin: 200px auto;
perspective: 520px;/*透視屬性*/
}
.box:hover img{
/*-webkit-transform:translateZ(200px);*//*平移的3D轉換*/
-webkit-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
/*-webkit-transform:rotateX(360deg);*/
}
img{
transition: all 1.5s;
}
</style>
</head>
<body>
<div class="box">
<img src="images/mw.jpg" alt="">
</div>
</body>複製代碼
4. CSS3 的過渡動畫
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
-webkit-transition:width 2s ease-in-out 3s, height 2s linear 1s, background-color 2s linear;
/*第一個值，表示發生改變的屬性，all 只要發生改變的屬性，所有加上過渡動畫*/
/*第二個值，表示時間*/
/*第三個值，表示動畫的運行軌跡*/
/*若是有第四個值，表示 先變化一個屬性，延遲必定時間，再變化另外一個屬性，
兩個屬性之間用逗號隔開*/
}
.box:hover{
width: 1500px;
height: 500px;
background-color: pink;
}
</style>
<div class="box"></div>
複製代碼
若是有第四個值，表示 先變化一個屬性，延遲必定時間，再變化另外一個屬性， 兩個屬性之間用逗號隔開
linear,規定以相同速度開始至結束的過渡效果（等於cubic-bezier(0,0,1,1)）
ease，規定慢速開始，而後變快，而後慢速結束的過渡效果（等於cubicbezier(0.25,1,0.25,1)）
ease-in，規定以慢速開始的過渡效果，（等於cubic-bezier(0.42,0,1,1)）
ease-out，規定以慢速結束的過渡結果（等於cubic-bezier(0,0,0.58,1)）
ease-in-out，規定以慢速開始和結束的過渡效果，（等於cubic-bezier(0.42,0,0.58,1)）
必需要有： 1.起始屬性 2.終止屬性
CSS3 過渡使用
1.須要具備層級關係
2.必須是 hover 能夠作到的
3.須要考慮是否有動態數據的添加，沒有動態就能夠用，動態數據用jQuery來寫，用回調來接收動態數據
5. object-fit ( image，video ) 自適應
（1）替換元素
其內容不受CSS視覺格式化模型（中文釋義參見這裏）控制的元素，好比image, 嵌入的文檔(iframe之類)或者applet。好比，img元素的內容一般會被其src屬性指定的圖像替換掉。替換元素一般有其固有的尺寸：一個固有的寬度，一個固有的高度和一個固有的比率。好比一幅位圖有固有用絕對單位指定的寬度和高度，從而也有固有的寬高比率。另外一方面，其餘文檔也可能沒有固有的尺寸，好比一個空白的html文檔。 CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展示獨立於CSS。object, video, textarea, input也是替換元素，audio和canvas在某些特定情形下爲替換元素。使用CSS的content屬性插入的對象是匿名替換元素。
（2）爲什麼須要object-position/object-fit?
適配響應式佈局
（3）object-fit理解
.fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }複製代碼
每一個屬性值的具體含義以下：
fill : 中文釋義「填充」。默認值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。
contain : 中文釋義「包含」。保持原有尺寸比例。保證替換內容尺寸必定能夠在容器裏面放得下。所以，此參數可能會在容器內留下空白。
cover : 中文釋義「覆蓋」。保持原有尺寸比例。保證替換內容尺寸必定大於容器尺寸，寬度和高度至少有一個和容器一致。所以，此參數可能會讓替換內容（如圖片）部分區域不可見。 none : 中文釋義「無」。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
scale-down : 中文釋義「下降」。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。
6. 同向邊距的重合問題（overflow : hidden 三個做用）
overflow : hidden
（1）給父級加 overflow : hidden 能夠清除子級浮動對父級的影響
（2）給父級加 overflow : hidden 可使子級超出部分隱藏（好比：製做輪播圖時）
（3）給父級加 overflow : hidden。解決同向邊距的重合問題；
HTML:
<div id="box">
<p>中華人民共和國</p>
</div
CSS:
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 300px;
height: 300px;
background-color: aquamarine;
/* padding-top: 30px; */
}
#box p{
background-color: brown;
margin-top: 30px;
}
</style>
複製代碼
案例
案例 1：盾牌製做：
<style>
html,body{
background-color: pink;
width: 100%;
height: 100%;
position: relative;
padding-top: 1px;
/*同向邊距問題的解決：
1. overflow: hidden;
2.padding-top: 1px;*/
}
.box{
width: 480px;
margin: 100px auto;/*上下100px，左右相等*/
}
.box img:first-child{
transform: translate(-200px,50px) rotate(45deg);
}
.box img:nth-child(2){
transform: translate(-600px,-50px) rotate(60deg);
}
.box img:nth-child(3){
transform: translate(400px,80px) rotate(60deg) scale(.5,.5);
}
.box img:nth-child(4){
transform: translate(-400px,-90px) rotate(60deg) scale(.5,.5);
}
.box img:nth-child(5){
transform: translate(0px,80px) rotate(54deg) scale(.5,.5);
}
.box img:nth-child(6){
transform: translate(400px,80px) rotate(65deg) scale(.5,.5);
}
.box img:nth-child(7){
transform: translate(400px,80px) rotate(45deg) scale(.5,.5);
}
.box img:nth-child(8){
transform: translate(0px,-300px) rotate(265deg) scale(.5,.5);
}
.box img:nth-child(9){
transform: translate(0,80px) rotate(60deg);
}
img{
transition: all 2s;
}
body:hover .box img{
transform: none;
}
</style>
</head>
<body>
<div class="box">
<img src="images/shield_1_01.png" alt="">
<img src="images/shield_1_02.png" alt="">
<img src="images/shield_1_03.png" alt="">
<img src="images/shield_1_04.png" alt="">
<img src="images/shield_1_05.png" alt="">
<img src="images/shield_1_06.png" alt="">
<img src="images/shield_1_07.png" alt="">
<img src="images/shield_1_08.png" alt="">
<img src="images/shield_1_09.png" alt="">
</div>
</body>複製代碼
案例 2：撲克牌
<style>
.box{
background-color: skyblue;
width: 600px;
height: 600px;
margin: 200px auto;
position: relative;
}
.box img{
position: absolute;
top:100px;
left: 100px;
transition: all 1s;
transform-origin: center bottom;
}
.box:hover img:first-child{
transform: rotate(0deg);
}
.box:hover img:nth-child(2){
transform: rotate(15deg);
}
.box:hover img:nth-child(3){
transform: rotate(30deg);
}
.box:hover img:nth-child(4){
transform: rotate(45deg);
}
.box:hover img:nth-child(5){
transform: rotate(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
</div>
</body>複製代碼
案例3. 鐘錶的翻轉
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
perspective: 600px;
}
.box::before,.box::after{
content: "";
display: block;
width: 300px;
height: 300px;
-webkit-background-size:100% 100%;
background-size: 100% 100%;
position: absolute;
}
.box::before{
background-image: url(images/1.jpg);
z-index: 1;
}
.box::after{
background-image: url(images/timg.jpg);
transition: transform 2s;
transform-origin: right center;
z-index: 2;
}
.box:hover::after{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>複製代碼
案例4. 正反面的翻頁效果
<style>
.box{
width: 310px;
height: 441px;
position: relative;
margin: 0 auto;
}
.box img{
position: absolute;
top: 0;
left: 0;
transition: all 1s;
backface-visibility: hidden;/*背面隱藏*/
perspective: 500px;/*透視屬性，能夠增長3D效果*/
}
.box img:first-child{
z-index: 2;
}
.box img:nth-child(2){
-webkit-transform:rotateY(180deg);
}
.box:hover img:first-child{
-webkit-transform:rotateY(180deg);
}
.box:hover img:nth-child(2){
-webkit-transform:rotateY(0);
}
</style>
</head>
<body>
<div class="box">
<img src="images/pk1.png" alt="">
<img src="images/pk2.png" alt="">
</div>
</body>複製代碼
案例5. 正方體的製做
style>
body{
perspective: 800px;
}
div{
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.box{
margin: 400px auto;
position: relative;
transform-style: preserve-3d;
-webkit-transform:rotateY(24deg) rotateX(35deg);
transition: transform 6s linear;
}
.box:hover{
-webkit-transform:rotateY(360deg) rotateX(360deg);
}
.box div{
position: absolute;
line-height: 300px;
text-align: center;
font-size: 100px;
color: #ccc;
}
.box div:first-child{
background-color: red;
transform-origin: right;
-webkit-transform:rotateY(90deg);
}
.box div:nth-child(2){
background-color: orange;
transform-origin: left;
-webkit-transform:rotateY(270deg);
}
.box div:nth-child(3){
background-color: yellow;
-webkit-transform:rotateX(90deg) translateY(150px) translateZ(150px);
}
.box div:nth-child(4){
background-color: green;
transform-origin: left;
-webkit-transform:rotateX(270deg) translateY(-150px) translateZ(150px);
}
.box div:nth-child(5){
background-color: blue;
-webkit-transform:translateZ(300px)
}
.box div:nth-child(6){
background-color: purple;
-webkit-transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="front">前</div>
<div class="rear">後</div>
</div>
</body>複製代碼
- 1. 個人筆記
- 2. HTML5/CSS3筆記
- 3. CSS3筆記
- 4. Redis個人筆記
- 5. 個人uniapp筆記
- 6. Git個人筆記
- 7. python個人筆記
- 8. 個人git筆記
- 9. CS224N個人筆記
- 10. node.js個人筆記
- 更多相關文章...
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • ADO Recordset（記錄集） - ADO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 個人筆記
- 2. HTML5/CSS3筆記
- 3. CSS3筆記
- 4. Redis個人筆記
- 5. 個人uniapp筆記
- 6. Git個人筆記
- 7. python個人筆記
- 8. 個人git筆記
- 9. CS224N個人筆記
- 10. node.js個人筆記