-
box-shadow 功能:給元素邊框增加陰影效果 陰影的模糊半徑、擴(kuò)展半徑、顏色 投影方式 2、position:給元素定位 3.z-index:設(shè)置元素上下層顯示順序 4.transform:元素變形,rotate(旋轉(zhuǎn)角度)參數(shù)正負(fù)代表順逆時針方向,scale(縮放倍數(shù)),skew(扭曲元素) 放在一起使用 例如:transform:rotate(旋轉(zhuǎn)角度) transform:scale(縮放倍數(shù)) 5.transition 動畫變化的快慢設(shè)置 便是元素從樣式一道樣式二的時間 語法:transition: duration查看全部
-
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .mainDiv{ width:100px; height:100px; margin:100px auto; text-align: center; line-height: 100px; font-weight: bold; color:#ddd; background:#ddd; border:1px solid #ddd; -webkit-transform:rotate(0deg) scale(1); -moz-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1); -webkit-transition:2s; -moz-transition:2s; transition:2s; } .mainDiv:hover{ color:#000; background:red; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html>查看全部
-
關(guān)鍵技術(shù)點: 1、box-shadow:陰影 2、position:給元素定位 3、z-index:設(shè)置元素上下層顯示順序 4、transform:元素變形。rotate(旋轉(zhuǎn)角度)scale(縮放倍數(shù))skew(扭曲元素) 5、transition設(shè)置元素由樣式1轉(zhuǎn)變成樣式2的過程所需時間。transition:durantion查看全部
-
重點知識預(yù)覽 box-shadow查看全部
-
瀏覽器兼容-webkit- chrome和safari -moz- firefox查看全部
-
樣式1到2查看全部
-
旋轉(zhuǎn)角度查看全部
-
上下層查看全部
-
上下層查看全部
-
1. box-shadow:給元素的邊框添加陰影的效果 2. position:給元素定位,主要用到絕對定位 3. z-index:設(shè)置元素的上下層顯示 4. transition:設(shè)置元素由樣式1轉(zhuǎn)變?yōu)闃邮?的過程所需時間 border-radius 該屬性允許您為元素添加圓角邊框! 5. transform:使元素變形的屬性,其配合rotate(旋轉(zhuǎn)角度)、scale(改變大小)、skew(扭曲元素)等參數(shù)一起使用 6.使用絕對定位position:absolute將照片放在不同的位置查看全部
-
關(guān)鍵技術(shù)點: 1、box-shadow:陰影 2、position:給元素定位 3、z-index:設(shè)置元素上下層顯示順序 4、transform:元素變形。rotate(旋轉(zhuǎn)角度)scale(縮放倍數(shù))skew(扭曲元素) 5、transition設(shè)置元素由樣式1轉(zhuǎn)變成樣式2的過程所需時間。transition:durantion查看全部
-
@·特效實現(xiàn)步驟: 1.放位置各異的照片 2.每張照片給一定旋轉(zhuǎn)角度 3.照片的動畫效果(陰影,緩慢旋轉(zhuǎn),緩慢放大特效)查看全部
-
關(guān)鍵技術(shù)點: 1、box-shadow:陰影 2、position:給元素定位 3、z-index:設(shè)置元素上下層顯示順序 4、transform:元素變形。rotate(旋轉(zhuǎn)角度)scale(縮放倍數(shù))skew(扭曲元素) 5、transition設(shè)置元素由樣式1轉(zhuǎn)變成樣式2的過程所需時間。transition:durantion查看全部
-
特效實現(xiàn)步驟: 1.放位置各異的照片 2.每張照片給一定旋轉(zhuǎn)角度 3.照片的動畫效果(陰影,緩慢旋轉(zhuǎn),緩慢放大特效)查看全部
-
transform:rotate(旋轉(zhuǎn)度數(shù)-deg) scale(放大倍數(shù)) 兼容寫法 -webkit- -moz查看全部
舉報
0/150
提交
取消