html基本常見特效設定

2021-07-25 16:46:05 字數 2049 閱讀 6432

為了相容老版本的寫法。例如:比較新版本的瀏覽器都支援直接寫:border-radius。因為制定html和css標準的組織w3c動作是很慢的。

通常,有w3c組織成員提出乙個新屬性,比如說圓角border-radius,大家都覺得好,但w3c制定標準,要走很複雜的程式,審查等。而瀏覽器商市場推廣時間緊,如果乙個屬性已經夠成熟了,就會在瀏覽器中加入支援。為避免日後w3c公布標準時有所變更,加入乙個私有字首,比如-webkit-border-radius,通過這種方式來提前支援新屬性。等到日後w3c公布了標準,border-radius的標準寫法確立之後,再讓新版的瀏覽器支援border-radius這種寫法。

簡單的說,瀏覽器私有字首,是瀏覽器對於新css屬性的乙個提前支援。-webkit- 表示 webkit核心,-moz- 代表 firefox gecko核心,moz代表的是firefox的開發商mozilla。

lang="en">

charset="utf-8">

css3_頁面特效_動畫title>

type="text/css">

/* chrome和safari 需要字首 -webkit-

firefx需要字首:-moz-

opera:-o-

ie:-ms-

*/div @keyframes anim,@-webkit-keyframes anim

25%

50%

75%

100%

}@-webkit-keyframes anim

25%

50%

75%

100%

}style>

head>

效果展示div>

body>

html>

效果圖:

lang="en">

charset="utf-8">

css3_頁面特效_過渡title>

type="text/css">

/*過渡效果:

transition 設定四個過渡屬性

transition-property 過度的名稱

transition-duration 過渡效果所花費的時間

transition-timing-function 過渡效果的時間曲線

transition-delay 過渡效果的開始時間

*/div div

:hover

style>

head>

效果展示div>

body>

html>

效果圖:

lang="en">

charset="utf-8">

css3_頁面特效title>

type="text/css">

/*轉換方法

translate 移動

rotate 旋轉

scale 縮放

skew 傾斜

matrix 矩陣

rotatex(y) 旋轉投影

*/div /*移動*/

.div2

/*旋轉*/

.div3

/*縮放*/

.div4

/*傾斜*/

.div5

/*旋轉投影 rotatex rotatey*/

.div6

style>

head>

這是初始效果div>

class="div2">移動後的效果div>

class="div3">旋轉後的效果div>

class="div4">縮放後的效果div>

class="div5">傾斜後的效果div>

class="div6">3d轉換後的效果div>

body>

html>

效果圖:

Flex 常見特效

常見效果類 animateproperty 動畫屬性 blur 模糊 desolve 溶解 fade 凋零 glow 發光 iris 瞳孔放大縮小 move 移動 pause 定格 resize 改變大小 rotate 旋轉 soundeffect 音效 wipeleft,wiperight,wip...

Flex 常見特效

常見效果類 animateproperty 動畫屬性 blur 模糊 desolve 溶解 fade 凋零 glow 發光 iris 瞳孔放大縮小 move 移動 pause 定格 resize 改變大小 rotate 旋轉 soundeffect 音效 wipeleft,wiperight,wip...

《HTML滑鼠移入特效》

前幾篇部落格一直在分享過去的經歷,我想或許該分享一些乾貨了 學習完這些內容去應用到實戰會讓你更加深刻的記住所學習的內容 滑鼠移入改變字型顏色 demo 滑鼠移動到這!滑鼠移入改變背景顏色 文字顏色 demo 滑鼠移動到這!可能會有小夥伴發現起到作用的還是 hover這個 對的沒錯,他是乙個滑鼠移入事...