-
<!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>查看全部
-
transition查看全部
-
transition查看全部
-
transform查看全部
-
css3新屬性查看全部
-
<!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:#000000; 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ù)點(diǎn)： 1、box-shadow:陰影 功能：給元素的邊框添加陰影的效果 語(yǔ)法：box-shadow:X軸偏移量 Y軸偏移量 [陰影模糊半徑][陰影擴(kuò)展半徑][陰影顏色][投影方式] 2、position:給元素定位 功能：給元素定位，主要用到絕對(duì)定位 用法：position:absolute與posistion:relative 配合使用實(shí)現(xiàn)相對(duì)于包含元素(參照元素)定位 3、z-index:設(shè)置元素上下層顯示順序 功能：設(shè)置元素的上下層顯示順序 語(yǔ)法：Z-index：整數(shù) 注意：擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面 4、transform:元素變形。rotate(旋轉(zhuǎn)角度)scale(縮放倍數(shù))skew(扭曲元素) 功能：是元素變形的屬性，其【配合rotate(旋轉(zhuǎn)角度),scale（縮放倍數(shù)）,skew(扭曲元素)等參數(shù)一起 使用 語(yǔ)法：transform:rotate(旋轉(zhuǎn)角度) transform:scale(縮放倍數(shù)) 5、transition設(shè)置元素由樣式1轉(zhuǎn)變成樣式2的過(guò)程所需時(shí)間。 語(yǔ)法：transition:durantion 注意：這只是transition其中的一種用法查看全部
-
特效實(shí)現(xiàn)步驟： 1.放位置各異的照片 2.每張照片給一定旋轉(zhuǎn)角度 3.照片的動(dòng)畫效果(陰影，緩慢旋轉(zhuǎn)，緩慢放大特效)查看全部
-
CSS3新特性運(yùn)用：絢麗照片墻查看全部
-
.mainDiv:hover{ background-color:red; color:black; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); }查看全部
-
<!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; -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{ width:130px; height:130px; background-color:#B9E1EE; color:red; font-weight:bold; border-radius:100px; line-height:130px; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">I ? you</div> </body> </html>查看全部
-
box-shadow(給元素的邊框添加陰影) 語(yǔ)法: box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式]查看全部
-
關(guān)鍵技術(shù)點(diǎn)： 1、box-shadow:陰影 2、position:給元素定位 3、z-index:設(shè)置元素上下層顯示順序 4、transform:元素變形。rotate(旋轉(zhuǎn)角度)scale(縮放倍數(shù))skew(扭曲元素) 5、transition設(shè)置元素由樣式1轉(zhuǎn)變成樣式2的過(guò)程所需時(shí)間。transition:durantion查看全部
-
旋轉(zhuǎn)特效查看全部
-
transition transform查看全部
舉報(bào)
0/150
提交
取消