CSS之千變萬化的Div

2022-02-18 04:20:52 字數 1605 閱讀 5962

廠址:

一、div和css3在一起

.box1
效果:

.content
效果:

.content
效果:

.content
效果:

.content
效果:

二、div + css3圖形高階

.content
效果:

.content
效果:

.content
效果:

.content
效果:

三、css3的2d變形

class="

content

">one

class="

content

">two

class="

content

">three

效果:

我們可以通過transform-origin來改變旋轉的原點,後面可以又兩個值,是left,top,right,bottom中的乙個,如果只給了乙個值,如top,則會以頂邊的中心進行旋轉,如下是以右邊的中心transform-origin:right;旋轉得到的圖形:

下面,關於形變的還有乙個比較重要的屬性就是skew,他就是對div做平行轉換,如:我們對x方向做轉換,效果如下:

class="

content

">one

效果:

四、總結

通過對div的border、border-radius、border-color、border-widht、width、height等屬性進行設定,我們可以得到很多不同的圖形,然後再加上對影象進行平移、放大、縮小、旋轉等操作

CSS3變形記 上 千變萬化的Div

傳統上,css就是用來對網頁進行布局和渲染網頁樣式的。然而,css3的出現徹底打破了這一格局。了解過css3的人都知道,css3不但可以對網頁進行布局和渲染樣式,還可以繪製一些圖形 對元素進行2d和3d變換。從而可以替代一些以前必須使用實現的功能,大大加快了網頁的響應速度。例如,css3可以實現漸變...

科學家發明「人工雲朵」 可千變萬化當廣告

近日美國一家公司的科研人員發明了一種新型的可在空中漂浮的像雲一樣的材料,這種新型材料形成的雲朵非常具有廣告效應,該材料是以混合肥皂泡為原料,重量比氦氣還要輕,就像拿塑料棒蘸著混合氦氣液體泡沫吹出的泡泡一樣五顏六色形態各異。這種人工雲朵製造出的真實的廣告標誌效果 據報道,這家美國公司正在用人工降雪降雨...

css中的div布局之巧用div

新手在頁面布局時往往很依賴div來分割頁面,例如下面這個頁面 這是乙個聊天的頁面,頁面有頭像,id,聊天內容以及時間。看到這個頁面我的第一思路是用三個div來進行操作。首先乙個大的div,在大的div中分左右兩個子div,然後在左div中新增,右邊的div中新增文字資訊。如下 talk body d...