css入門筆記(下)

時間  2019-11-07
標籤 css 入門 筆記 欄目 CSS 简体版
原文   原文鏈接

若是基礎很差，建議先學習javascript

css入門筆記(上)css

juejin.im/post/5cc569…html

15 CSS3選擇器

結構選擇器

:nth-child(n)第幾個元素 從1開始設置
:nth-child(2n)偶數元素 從0開始設置
:nth-child(2n+1) 奇數元素
:nth-of-type(n) 某個元素下同種類型中的第幾個子元素
:first-child -> nth-child(1)
:first-of-type->nth-of-type(1)
:last-child
:last-of-type
:only-child僅有一個子元素
:only-of-type 同種類型的子元素只有一個
:empty 知足條件的html5

否認選擇器

:not()java

屬性選擇器

E[attr=val]
E[attr|=val] 只能等於val 或只能以val-開頭
E[attr*=val] 包含val字符串
E[attr~=val] 屬性值有多個，其中一個是val
E[attr^=val] 以val開頭
E[attr$=val] 以val結尾web

目標僞類選擇器

:target 用來匹配url指向的目標元素
存在url指向該匹配元素時，樣式效果纔會生效瀏覽器

僞元素

:first-line 匹配第一行文本
:first-letter 匹配第一首字符
:before 和 after DOM元素先後插入額外的內容bash

16 圓角 border-radius

border-radius :1-4個數字/1-4個數字ide

  • 前面是水平半價，後面是垂直半徑
  • 四個數字方向分別是左上 右上 右下  左下
  • 不給 "/" 則水平半徑和垂直半徑同樣
    • border-radius:10px/5px
    • border-radius:60px 40px 30px 20px/30px 20px 10px 5
  • 例子:圓 橢圓 半圓 扇形

17 線性漸變

linear-gradientsvg

  • linear-gradient([<起點>||<角度>,]?<點>,<點>...)
  • 只能用背景上
  • 顏色是沿着一條直線軸變化
  • 參數
    • 起點:從什麼方向開始漸變
      • left、top、left top
    • 角度:叢書名角度開始漸變
      • xxx deg的形式
    • 點: 漸變點的顏色和位置
      • red 50%,位置可選
  • 重複線性漸變

image.png

18 徑向漸變

background: radial-gradient(shape size at position, start-color, ..., last-color);

shape 肯定圓的類型:
- ellipse (默認): 指定橢圓形的徑向漸變。
- circle ：指定圓形的徑向漸變
size 定義漸變的大小，可能值：
- farthest-corner (默認) : 指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角
- closest-side ：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊
- closest-corner ： 指定徑向漸變的半徑長度爲從圓心到離圓心最近的角
- farthest-side ：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊
position 定義漸變的位置。可能值：
- center（默認）：設置中間爲徑向漸變圓心的縱座標值。
- top：設置頂部爲徑向漸變圓心的縱座標值。
- bottom：設置底部爲徑向漸變圓心的縱座標值。
start-color, ..., last-color 用於指定漸變的起止顏色。 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style> #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法（必須放在最後） */ } </style>
</head>
<body>

<h3>徑向漸變 - 顏色結點不均勻分佈</h3>
<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持漸變。</p>

</body>
</html>
複製代碼

image.png

19 陰影

盒子陰影

box-shadow

h v blur spread color inset

  • h:水平方向偏移
  • v:垂直方向偏移
  • blur:模糊半徑
  • spread:拓展半徑
  • color:顏色
  • inset:加上這個表示內陰影  默認是外陰影

文字陰影

text-shadow

x y blur color

  • x軸偏移 y軸偏移 模糊度 顏色
  • 多層陰影製做文字立體效果，設置多種顏色，中間以逗號隔開

文字添加邊框
text-stroke:2px blue

  • 經過設定1px的透明邊框，可讓文字變得平滑
  • 顏色設成透明建立鏤空字體

20 濾鏡

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意: 濾鏡一般使用百分比 (如：75%), 固然也可使用小數來表示 (如：0.75)。

Filter 描述
none 默認值，沒有效果。
blur(px) 給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一塊兒， 因此值越大越模糊；

若是沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。
brightness(%) 給圖片應用一種線性乘法，使其看起來更亮或更暗。若是值是0%，圖像會全黑。值是100%，則圖像無變化。其餘的值對應線性乘數效果。值超過100%也是能夠的，圖像會比原來更亮。若是沒有設定值，默認是1。
contrast(%) 調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值能夠超過100%，意味着會運用更低的對比。若沒有設置值，默認是1。
drop-shadow(h-shadow v-shadow blur spread color) 給圖像設置一個陰影效果。陰影是合成在圖像下面，能夠有模糊度的，能夠以特定顏色畫出的遮罩圖的偏移版本。 函數接受 (在CSS3背景中定義)類型的值，除了"inset"關鍵字是不容許的。該函數與已有的box-shadow box-shadow屬性很類似；不一樣之處在於，經過濾鏡，一些瀏覽器爲了更好的性能會提供硬件加速。 <shadow>參數以下：``**<offset-x>** **<offset-y>** (必須)這是設置陰影偏移量的兩個 <length>值. **<offset-x>** 設定水平方向距離. 負值會使陰影出如今元素左邊. **<offset-y>**設定垂直距離.負值會使陰影出如今元素上方。查看**<length>**可能的單位.<br />**若是兩個值都是0**, 則陰影出如今元素正後面 (若是設置了 and/or `，會有模糊效果).````  (可選)這是第三個code>值. 值越大，越模糊，則陰影會變得更大更淡.不容許負值 若未設定，默認是0 (則陰影的邊界很銳利).  (可選)這是第四個 值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素同樣大小). 
注意: Webkit, 以及一些其餘瀏覽器 不支持第四個長度，若是加了也不會渲染。   (可選)查看 該值可能的關鍵字和標記。若未設定，顏色值基於瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用color color屬性的值。另外, 若是顏色值省略，WebKit中陰影是透明的。```````
grayscale(%) 將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則徹底轉爲灰度圖像，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
hue-rotate(deg) 給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值爲0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值至關於又繞一圈。
invert(%) 反轉輸入圖像。值定義轉換的比例。100%的價值是徹底反轉。值爲0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。
opacity(%) 轉化圖像的透明程度。值定義轉換的比例。值爲0%則是徹底透明，值爲100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也至關於圖像樣本乘以數量。 若值未設置，值默認是1。該函數與已有的opacity屬性很類似，不一樣之處在於經過filter，一些瀏覽器爲了提高性能會提供硬件加速。
saturate(%) 轉換圖像飽和度。值定義轉換的比例。值爲0%則是徹底不飽和，值爲100%則圖像無變化。其餘值，則是效果的線性乘子。超過100%的值是容許的，則有更高的飽和度。 若值未設置，值默認是1。
sepia(%) 將圖像轉換爲深褐色。值定義轉換的比例。值爲100%則徹底是深褐色的，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
url() URL函數接受一個XML文件，該文件設置了 一個SVG濾鏡，且能夠包含一個錨點來指定一個具體的濾鏡元素。
例如：filter: url(svg-url#element-id)
initial 設置屬性爲默認值
inherit 從父元素繼承該屬性

21 遮罩

mask和background用法是相仿的，mask的值有這些

image.png 

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
複製代碼
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style> .mask{ width:475px; height:260px; background-image:url("http://img.blog.csdn.net/20170701221659356"); /* 取值是圖片路徑 */ -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018"); } </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>
複製代碼

22 transition 過渡動畫

transition-property 過分屬性 all[attr]
transition-dunration 過分時間
transition-delay 延遲時間
transition-timing-function 運動類型

  • ease:(逐漸變慢)默認值
  • linear:(勻速)
  • ease-in:(加速)
  • ease-out:(減速)
  • ease-in-out:(先加速後減速)
  • cubic-bezier 貝塞爾曲線(x1,y1,x2,y2) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style> #div{ width: 100px; height:100px; background: red; transition:width 1s 1s; /* 延遲的一秒 */ } #div:hover{ width: 300px; transition:width 1s 1s; /* 延遲的一秒 */ } </style>
</head>
<body>
    <div id="div"></div>
</body>
</html>
複製代碼

項目案例

image.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style> /* 過渡動畫效果思考的步驟 1.找到過渡屬性 2.找到過渡屬性起始值和結束值 3.在合適的位置上增長transition屬性 過渡屬性 box-shadow 起始值 30px transparent 結束值 0 white */ body{ background:#2192bc; } .box{ width: 100px; height: 100px; background: #2c9dc4 url("./1991841492744344.jpg") no-repeat center center; border-radius: 50%; margin: 100px auto; box-shadow: 0 0 0 30px transparent; -o-transition: box-shadow 1s; -ms-transition: box-shadow 1s; -moz-transition: box-shadow 1s; -webkit-transition: box-shadow 1s; transition: box-shadow 1s; } .box:hover{ box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
複製代碼

23 transform 2D變換

rotate() 旋轉函數

  • deg 度數
  • transform-origin 旋轉的基點

skew()傾斜函數

  • skewX()
  • skewY()

scale()縮放函數 默認值是1

  • scaleX()
  • scaleY()

translate() 位移函數

  • translateX()
  • translateY()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style> #div1{ width: 200px; height: 300px; border: 1px solid red; } #div1 img{ width:100%; height: 100%; transition: all 1s; } #div1:hover img{ transform: skew(-15deg,15deg); } </style>
</head>
<body>
    <div id="div1">
        <img src="./1991841492744344.jpg" alt="" srcset="">
    </div>

</body>
</html>
複製代碼

24 animation幀動畫

關鍵幀 --

相似於flash定義動畫在每一個階段的樣式，即幀動畫

關鍵幀的時間單位

  • 數字: 0%、25%、100%等(設置某個時間段內的任意時間點的樣式)
  • 字符:form(0%)、to(100%);

格式

@keyframes 動畫名稱
{
	動畫狀態
}
複製代碼
<!DOCTYPE html>
<html>
<head>
<style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { from {background:red;} to {background:yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background:red;} to {background:yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;} } @-o-keyframes myfirst /* Opera */ { from {background:red;} to {background:yellow;} } </style>
</head>
<body>

<div></div>

<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>

</body>
</html>

複製代碼

格式

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
複製代碼

25 transform3d變形

1.3d 和2d不一樣點是多了一個z軸,2d都是一些平移效果，3d可讓它按照軸爲中心旋轉
2.爲了增長空間想象多了一個左手法則
解釋：伸出左手，讓拇指和食指成「L」形，大拇指向右，食指向上，中指指向
前方。這樣咱們就創建了一個左手座標系，拇指、食指和中指分別表明X、
Y、Z軸的正方向。以下圖
複製代碼
  • 方向判斷的口訣
x左邊是負的，右邊是正的
y上面是負的， 下面是正的
z裏面是負的， 外面是正的
複製代碼

rotateX()

1.就是沿着 x 立體旋轉.例如transform:rotateX(180deg);旋轉時候也是圖片中
心爲軸旋轉
複製代碼

rotateY()

1.就是沿着 y 立體旋轉.例如transform:rotateY(180deg);旋轉時候也是圖片中
心爲軸旋轉
複製代碼

rotateZ()

1.就是沿着 z 立體旋轉.例如transform:rotateZ(180deg);旋轉時候也是圖片中
心爲軸旋轉
複製代碼

移動 translateX(x)/translateY(y)/translateZ(z)

1.3d比2d 移動多了一個 translateZ(z)
2.[注意]其中，x和y能夠是長度值，也能夠是百分比，百分比是相對於其本
身元素水平方向的寬度和垂直方向的高度和；z只能設置長度值
3.簡寫：translate3d(x,y,z)
複製代碼

透視 -- perspective

1.電腦顯示屏是一個2D平面，圖像之因此具備立體感（3D效果），其實只是一種視覺呈現，經過透視能夠實現此目的。
2.透視能夠將一個2D平面，在轉換的過程中，呈現3D效果。
- 透視原理： 近大遠小 。
- 瀏覽器透視：把近大遠小的全部圖像，透視在屏幕上。
- perspective：視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置
3.並不是任何狀況下須要透視效果，根據開發須要進行設置。
4.perspective 通常做爲一個屬性，設置給父元素，做用於全部3D轉換的子元素
複製代碼

使用透視案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> body { perspective: 1000px; /*視距 距離 眼睛到屏幕的距離 視距越大效果越不明顯 視距越小，透視效果越明顯*/ } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateX(360deg); } </style>
</head>
<body>
<img src="images/x.jpg" alt=""/>
</body>
</html>
複製代碼

元素不面向屏幕時是否可見 -- backface-visibility

1.backface-visibility 屬性定義當元素不面向屏幕時是否可見。
複製代碼

反轉盒子案例

div {
			width: 224px;
			height: 224px;
			margin: 100px auto;
			position: relative;
		}
		div img {
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s; 
		}
		div img:first-child {
			z-index: 1;
			backface-visibility: hidden; /* 不是正面對象屏幕，就隱藏 */
		}
		div:hover img {
			transform: rotateY(180deg);
}
複製代碼

案例

1570286906545-888bf5ca-a6ab-4335-83ca-3e8f45ecb5e6.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> section{ width: 500px; height: 500px; margin: 0 auto; background: url('http://pic22.nipic.com/20120725/9676681_001949824394_2.jpg') no-repeat; background-size: cover; position: relative; perspective: 1000px; /*給父盒子添加透視效果 必定要加透視效果*/ } .ldoor,.rdoor{ position: absolute; background-color: red; border:1px solid #000; top:0; width: 250px; height: 500px; } .ldoor{ transform-origin: left;/*旋轉軸*/ left: 0; } .rdoor{ transform-origin: right;/*旋轉軸*/ right: 0; } /*鼠標通過section 盒子 兩個門盒子 翻轉 rotateY*/ section:hover .ldoor { transform: rotateY(-130deg); /*由於往左邊翻轉，因此是負值*/ } section:hover .rdoor { transform: rotateY(130deg); } </style>
</head>
<body>
<section>
    <div class="ldoor"></div>
    <div class="rdoor"></div>
</section>
</body>
</html>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程