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