css3宽度变大动画_学所 前端 | HTML5+CSS3
HTML5
&CSS3
2020/09/5
啥?！HTML5是什么？
“HTML5”和“HTML”有什么區別？
新增的HTML5特性有多好用？
HTML5??? HTML5是W3C與WHATWG合作的產物。W3C指World Wide Web Consortium，即萬維網聯盟，專注于XHTML2.0。而WHATWG指的是Web Hypertext Application Technology Working Group，致力于web表單和應用程序。在 2006 年，雙方進行合作，決議創建一個新的HTMl版本，即HTML5。
??? HTML的上一個版本誕生于1999年，HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。
HTML5 建立的一些規則：
HTML5的新特性是基于 HTML、CSS、DOM 以及 JavaScript的新“規范”，它減少了對外部插件的需求，優化了對錯誤的處理機制，添加了更多可以取代腳本的標記，HTML5 可以獨立于設備，開發進程對公眾透明。
最新版本的 Safari、Chrome、Firefox 、Opera以及IE9 都分別支持某些 HTML5 特性。
HTMl5新特性
結構類標簽
https://www.w3school.com.cn/tags/index.asp
????結構標簽是構建基本網頁結構的主要元素，只具有語義層的意義，大多數沒有太多特殊的作用。HTML5新增的結構類標簽大大增強了代碼的可讀性。
HTML5 中的一些有趣的新特性有：
用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持。
新的特殊內容元素，比如 article、footer、header、nav、section等。
新的表單控件，比如 calendar、date、time、email、url、search等
瀏覽器支持：
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
全局類屬性
contendeditable：使內容變成可編輯文本，繼承父級元素。
true
false
classname繼承父級元素
hidden：規定對元素進行隱藏，只要存在就是隱藏效果，如不想要隱藏，則需要將其刪除，而不是設置為false。設置該屬性會使元素脫離文檔流。
spellcheck：拼寫檢查，可對text、input、textarea等文本進行檢查，
其它標簽
mark：標記文本標簽-突出黃色。
ambed：引入其他多媒體標簽。
article：標記一個文章
音視頻標簽
video：視頻標簽，對視頻的文件格式以及頻率都有要求。
controls，使用默認的視頻控制面板
autoplay，設置自動播放
width/height，設置視頻播放窗口的寬高
播放次數-默認為1次
一般使用子標簽source來引入音視頻的文件、可寫多個作為備選。支持的文件格式：Ogg、mp4、WebM，其屬性值與屬性名相同，即可以只寫屬性名。
audio：音頻標簽，用法同視頻標簽的使用。
CSS3??? CSS3 是完全向后兼容的。
??? CSS3 被劃分為一些模塊，其中最重要的 就有：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉換、動畫、多列布局以及用戶界面幾類。W3C 仍然在對 CSS3 規范進行開發，而當前主流的瀏覽器都已經實現了相當多的 CSS3 屬性。
CSS3新增屬性
border——邊框類
border-radius：設置圓角邊框，其屬性值可以為百分比，或者具體的像素。
由下例可看出，當值大于50%時，效果是和50%的圓角效果一樣的。
而在網頁中最舒適的圓角，即一般按鈕的圓角效果，這時候的屬性值設為具體的像素值，且值為元素高度的一半，即此效果：
box-shadow：設置元素的陰影效果。屬性值有：
h-shadow，必備屬性，設置水平陰影的位置，可以為負值。? ?
v-shadow，必備屬性，設置垂直陰影的位置，可以為負值。?
blur，用于設置模糊距離。?
spread，設置陰影尺寸。
color，設置陰影的顏色。? ??
inset，可將外部陰影 (outset) 改為內部陰影(第五個案例)。??
border-image：設置圖片邊框。
border-image-source，用在邊框的圖片的路徑。? ?
border-image-slice，圖片邊框向內偏移。? ?
border-image-width，圖片邊框的寬度。? ?
border-image-outset，邊框圖像區域超出邊框的量。? ?
border-image-repeat，圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。?
????在設置時有幾點需要注意，首先是在設置border-image時，需要先給要設置邊框的元素設置一個border，可設成transparent值為固體透明的樣式，再設置圖片邊框。對于圖片邊框的切片可以設成百分比或者一個數值，該數值和圖片邊框的寬度一樣，設置時不需要有單位，通過調節這兩個數值可以達到不同的視覺效果，另外針對圖片平鋪的設置，其實并沒有出現效果，這個之后需要在再進行討論。
background——背景類
background-clip：規定背景的繪制區域。
border-box，背景被裁剪到邊框盒。
padding-box，背景被裁剪到內邊距框。
content-box，背景被裁剪到內容框。? ??
background-origin：規定背景圖片的定位區域。
border-box，背景被裁剪到邊框盒。
padding-box，背景被裁剪到內邊距框。
content-box，背景被裁剪到內容框。
由第三個box例子可以看出background-clip與background-origin的區別，后者只能夠移動圖片，前者則是剪裁超出部分的顯示。
可移動的內容：
background-size：規定背景圖片的尺寸。
設置具體數值，即背景圖像的高度和寬度。第一個值為寬，第二個值為高。只設置一個值時，第二個值會被設置為 "auto"。
設置百分比，以父元素的百分比來設置背景圖像的寬度和高度。
如果只設置一個值，則第二個值會被設置為 "auto"。
cover，把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain，使圖像圖像的寬度和高度完全適應內容區域。?
font——文字類
????文字類中的許多屬性是當前主流的瀏覽器不兼容的，所以不一一列舉。
text-align-last：設置如何對齊最后一行或緊挨著強制換行符之前的行。?
?left，設置最后一行文字左對齊
right，設置最后一行文字右對齊
center，設置最后一行文字居中對齊
text-overflow：規定當文本溢出包含元素時發生的事情。
clip，修剪文本。
ellipsis，顯示省略符號來代表被修剪的文本。
string，使用給定的字符串來代表被修剪的文本。
text-shadow：向文本添加陰影，與box-shadow的用法相同。
word-break：規定非中日韓文本的換行規則。
normal，使用瀏覽器默認的換行規則。? ?
break-all，允許在單詞內換行。? ?
keep-all，只能在半角空格或連字符處換行。? ?
word-wrap：允許對長的不可分割的單詞進行分割并換行到下一行。
normal，只在允許的斷字點換行(瀏覽器保持默認處理)。? ?
break-word，在長單詞或 URL 地址內部進行換行。? ?
@font-face ——字體
font-family：name；規定字體的名稱。? src：URL；定義字體文件的路徑。
font-stretch：可選屬性，定義如何拉伸字體。默認是 "normal"。??
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded? ??
font-style：可選屬性。定義字體的樣式。默認是 "normal"。? ????
ormal
italic
oblique? ?
font-weight：可選屬性。定義字體的粗細。默認是 "normal"。???
normal-不加粗
bold-加粗
100
200
300
400
500
600
700
800
900
unicode-range：unicode-range；可選屬性。定義字體支持的 UNICODE 字符范圍。默認是 "U+0-10FFFF"。
? ? 設置字體的前提是先下載好字體文件，ttf、otf、otc或者woff等，擁有了字體文件之后，可以直接將這種字體安裝到自身的電腦中，若文件格式不兼容，或者需要改成該種字體的其它文件格式，可以到“字客網(http://www.fontke.com/)”進行字體文件格式轉換。
Transform——2D轉換
translate()：通過 translate() 方法，元素從其當前位置移動，根據給定的 left(x 坐標) 和 top(y 坐標) 位置參數：
rotate()：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。-90deg與270deg的旋轉效果是一致的，以此類推。
scale()：使元素的尺寸增加或者減少，第一個數值為寬，第二個數值為高，給一個值時為寬高放大或縮小相同的倍率。
skew()：元素翻轉給定的角度，兩個數值時為水平值垂直方向值。
matrix()：把所有 2D 轉換方法組合在一起，需要六個參數，包含數學函數，允許旋轉、縮放、移動以及傾斜元素。
六個參數之間的關系詳見：
https://blog.csdn.net/weixin_42103959/article/details/81044389
transform-origin：允許改變被轉換元素的位置。
資料：
https://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html
Transform——3D轉換
translate3d(x,y,z)，定義3D轉化。
translateX(x)，僅用于X軸的值。?
translateY(y)，僅用于Y軸的值。
translateZ(z)，僅用于Z軸的值。
scale3d(x,y,z)，定義 3D 縮放轉換。? ?
scaleX(x)，給定 X 軸縮放值。? ?
scaleY(y)，給定 Y 軸縮放值。? ?
scaleZ(z)，給定 Z 軸縮放值。? ?
rotate3d(x,y,z,angle)，定義3D旋轉。??
rotateX(angle)，給X軸旋轉角度。?
rotateY(angle)，給Y軸旋轉角度。
rotateZ(angle)，給Z軸旋轉角度。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)，3D 轉換，使用 16 個值的 4x4 矩陣。
perspective(n)，定義 3D 轉換元素的透視視圖。? ?
transform：向元素應用 2D 或 3D 轉換。??
transform-origin：允許你改變被轉換元素的位置。
transform-style：規定被嵌套元素如何在 3D 空間中顯示。
flat，子元素將不保留其 3D 位置。
preserve-3d，子元素將保留其 3D 位置。??
perspective：規定 3D 元素的透視效果。?
number，元素距離視圖的距離，以像素計。? ?
none，默認值，不設置透視。
perspective-origin：規定 3D 元素的底部位置
水平方向，默認值為50%。
????其他取值：
left
center
right
length
%-設置百分
垂直方向：默認值為50%。
????可能的值：
top
center
bottom
length
%-設置百分比
backface-visibility：定義元素在不面對屏幕時是否可見。
visible，背面是可見的。? ?
hidden，背面是不可見的。? ??
transition——過渡
transition：簡寫屬性，用于在一個屬性中設置四個過渡屬性。
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property：規定應用過渡的 CSS 屬性的名稱。
none，沒有屬性會獲得過渡效果。
all，所有屬性都將獲得過渡效果。
property，定義應用過渡效果的CSS 屬性名稱列表，列表以逗號分隔。? ?
transition-duration：定義過渡效果花費的時間，單位以秒或毫秒計，默認值是 0。
transition-timing-function：規定過渡效果的時間曲線。默認是 "ease"。
linear，規定以相同速度開始至結束的過渡效果，效果同：
cubic-bezier(0,0,1,1)；??
ease，規定慢速開始，然后變快，然后慢速結束的過渡效果，效果同：
cubic-bezier(0.25,0.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))。? ?
cubic-bezier(n,n,n,n)，在 cubic-bezier 函數中定義自己的值。取值范圍在0-1之間。
transition-delay：定在過渡效果開始之前需要等待的時間，以秒或毫秒計，默認值為0。
animate——動畫
@keyframes：規定動畫。創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動畫過程中，可以多次改變這套 CSS 樣式，并以百分比的形式來規定改變發生的時間，從0%到100%，或者也可以使用"from" - "to"來記錄這些關鍵節點。
0% 是動畫的開始時間，100% 動畫的結束時間，而為了獲得最佳的瀏覽器支持，應該始終定義 0% 和 100% 選擇器。在使用動畫屬性來控制動畫的外觀時，應同時將動畫與選擇器綁定。
寫法：
@keyframes 動畫名稱{
? ? 0% {css-styles;}
????100%{css-style;}
}
animation：所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
如：
animation: myfirst 5s linear 2s infinite alternate;
即：
animation:動畫名稱 動畫周期時長 出現形式 開始時間(被觸發后)(出現效果時長) 動畫播放次數；
animation-name：規定 @keyframes 動畫的名稱。
keyframename，規定需要綁定到選擇器的 keyframe 的名稱。? ?
none，規定無動畫效果(可用于覆蓋來自級聯的動畫)。?
animation-duration： 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-function：規定動畫的速度曲線。默認是 "ease"。
linear，動畫從頭到尾的速度是相同的。
ease，默認。動畫以低速開始，然后加快，在結束前變慢。
ease-in，動畫以低速開始。??
ease-out，動畫以低速結束。? ?
ease-in-out，以低速開始和結束。
cubic-bezier(n,n,n,n)，在cubic-bezier 函數中自己的值。取值范圍是0-1之間。
animation-delay：規定動畫何時開始。默認是 0。
animation-iteration-count：規定動畫被播放的次數。默認是 1。
animation-direction：規定動畫是否在下一周期逆向地播放。默認是 "normal"。
normal，默認值。動畫正常播放。
alternate，動畫輪流反向播放。? ??
animation-play-state：規定動畫是否正在運行或暫停。默認是 "running"。
paused，規定動畫已暫停。? ?
running，規定動畫正在播放。
animation-fill-mode：規定對象動畫時間之外的狀態。
none，不改變默認行為。? ?
forwards，當動畫完成后，保持最后一個屬性值(在最后一個關鍵幀中定義)。? ?
backwards，在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值(在第一個關鍵幀中定義)。? ?
both，向前和向后填充模式都被應用。? ??
columns——多列
column-count：規定元素被分隔的列數。
column-fill：規定如何填充列。?
column-gap：規定列之間的間隔。
column-rule：設置所有 column-rule-* 屬性的簡寫屬性。
column-rule-color：規定列之間規則的顏色。
column-rule-style：規定列之間規則的樣式。
column-rule-width：規定列之間規則的寬度。
column-span：規定元素應該橫跨的列數。
column-width：規定列的寬度。
columns：規定設置column-width 和 column-count 的簡寫屬性。? ??
appearance——用戶界面
appearance：允許您將元素設置為標準用戶界面元素的外觀。
box-sizing：允許您以確切的方式定義適應某個區域的具體內容。
icon：為創作者提供使用圖標化等價物來設置元素樣式的能力。
nav-down：規定在使用 arrow-down 導航鍵時向何處導航。
nav-index：設置元素的 tab 鍵控制次序。
nav-left：規定在使用 arrow-left 導航鍵時向何處導航。
nav-right：規定在使用 arrow-right 導航鍵時向何處導航。
nav-up：規定在使用 arrow-up 導航鍵時向何處導航。
outline-offset： 對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。
resize：規定是否可由用戶對元素的尺寸進行調整。? ??
學習心得早在前兩周就過完了HTML5和CSS3知識，當時的筆記并沒有做得那么詳盡，很多知識都沒有真正掌握理解，最明顯的就是在上周的項目中，我們小組的動畫效果極少，用JS寫的模塊切換都比較生硬，所以想著趕緊把動畫的內容好好理順，并掌握下來。
這篇推文沒有動畫效果的展示，我會在下一篇推文中挑一些動畫來寫，并分享出來。
【END】
文字：Seongyeom自整筆記
圖片：網絡配圖
總結
以上是生活随笔為你收集整理的css3宽度变大动画_学所 前端 | HTML5+CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三菱modbusRTU通讯实例_干货 |
- 下一篇： python自动化开发是什么_Pytho