前端入門知識 css3(1)

2021-09-23 22:37:47 字數 1458 閱讀 9775

圓角,透明度,rgba

css3圓角

設定某乙個角的圓角,比如設定左上角的圓角:

border-top-left-radius:30px 60px;

同時分別設定四個角: border-radius:30px 60px 120px 150px;

設定四個圓角相同:

border-radius:50%;

rgba(新的顏色值表示法)

1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(相容ie);

2、rgba(0,0,0,0.1) 前三個數值表示顏色,第四個數值表示顏色的透明度

css3陰影

box-shadow:h-shadow v-shadow blur spread color inset;

分別設定陰影:水平偏移 垂直偏移 羽化大小 擴充套件大小 顏色 是否內陰影

......

css3圓角示例

css3圓角示例

透明度rgba示例

這是乙個div標籤

這是乙個div2標籤

透明度rgba示例

transition動畫

css3 transition動畫

1、transition-property 設定過渡的屬性,比如:width height background-color

2、transition-duration 設定過渡的時間,比如:1s 500ms

3、transition-timing-function 設定過渡的運動方式

linear 勻速

ease 開始和結束慢速

ease-in 開始是慢速

ease-out 結束時慢速

ease-in-out 開始和結束時慢速

cubic-bezier(n,n,n,n)

比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)

曲線設定**:

4、transition-delay 設定動畫的延遲

5、transition: property duration timing-function delay 同時設定四個屬性

一般用緩衝狀態;

滑鼠移動到圖形上變化動畫

滑鼠移動到圖形上變化動畫

滑鼠移動彈出說明動畫

滑鼠移動彈出說明動畫

最後,給大家推薦乙個前端學習高階內推交流圈子(前端資料分享),不管你在地球哪個方位,

不管你參加工作幾年都歡迎你的入駐!(會定期免費提供一些收藏的免費學習書籍資料以及整理好的面試題和答案文件!)

願大家都能在程式設計這條路,越走越遠。

css3 1 基本的選擇器

基本的選擇器 子元素選擇器 wrap inner en wrap class inner wrap下一層 class inner 最裡層 class inner wrap下一層 class inner wrap下一層 class inner wrap下一層 view code 相鄰兄弟選擇器 這被稱...

前端入門知識 css(2)

css顏色表示法 css顏色值主要有三種表示方法 顏色名表示,比如 red 紅色,gold 金色。rgb表示,比如 rgb 255,0,0 表示紅色。16進製制數值表示,比如 ff0000 表示紅色,這種可以簡寫成 f00。css顏色表示法示例 這是乙個div標籤 css選擇器 如果對同一內容區新增...

前端入門知識 css3(2)

transform變換 css3 transform變換 1 translate x,y 設定盒子位移 2 scale x,y 設定盒子縮放 3 rotate deg 設定盒子旋轉 4 skew x angle,y angle 設定盒子斜切 5 perspective 設定透視距離 6 transf...