css3 常見應用 2018 5 19

2021-09-02 21:40:12 字數 1186 閱讀 1232

2 背景 設定為背景-可以對body設定背景圖==

background:url(/i/bg_flower.gif);

background-size:63px 100px;

多個背景圖

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

可以指定到指定邊框==

3 文字

text-shadow: 5px 5px 5px #ff0000; 新增陰影

h1自動換行

p 4 字型

設定需要的字型和格式==

5 css3 轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸

translate()

rotate() rotate(30deg) 把元素順時針旋轉 30 度。

scale() scale(2,4) 把寬度轉換為原始尺寸的 2 倍,把高度轉換為原始高度的 4 倍。

skew() 翻轉 skew(30deg,20deg) 圍繞 x 軸把元素翻轉 30 度,圍繞 y 軸翻轉 20 度。

matrix()

對整個div進行拉伸==

skewy(angle) 定義 2d 傾斜轉換,沿著 y 軸。

transform:skew(30deg,20deg);

值 skew(30deg,20deg) 圍繞 x 軸把元素翻轉 30 度,圍繞 y 軸翻轉 20 度。

6 過渡!!

滑鼠懸停時候,展示

div:hover

7 動畫漸變

當動畫為 25% 及 50% 時改變背景色,然後當動畫 100% 完成時再次改變:

8 分列!!

column-count:3;

column-gap:30px; 中間的間隔

9 使用者介面

outline-offset:15px; 指定輪廓 不暫空間

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

可以學習

float left

選擇器:

.class 類

#id

[attribute=value] [name="hello"]

div p 選擇 元素內部的所有 元素。

單位 % px畫素

CSS3動畫常見屬性

屬性 描述 keyframes 定義動畫 animation 所有動畫屬性的簡寫屬性,除了animation play state animation name 規定 keyframes動畫的名稱 animation duration 規定動畫完成乙個週期所花費的秒或毫秒,預設是0 animatio...

CSS3動畫常見特效

transition all 2s 設定哪些屬性可以有過渡效果 all 所有的屬性 注意 並不是所有的屬性都可以過渡 transition property left,width transition duration 5s duration during 在 期間 設定完成過渡所需要的時間 tra...

CSS3學習 初步應用

css是由選擇器 selector 與樣式規則 rule 組成 和jquery相似 而選擇器是指css樣式要應用的目標。當不同的選擇器寫在一起的時候,中間用逗號 隔開即可 當有多個樣式規則時,中間用分號 隔開。下面進行演示 首先在對應的css檔案中對要修飾的物件進行定義 text style1然後在...