-
關鍵技術點： （1）box-shadow 功能：給元素的邊框添加陰影的效果 語法：box-shadow：X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式] （2）position 功能：給元素定位，主要用到絕對定位 用法：position：absolute 與 position：relative 配合使用實現相對于包含元素(參照元素)定位 （3）z-index 功能：設置元素的上下層顯示順序 語法：z-index：整數 注意：擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面 （4）transform 功能：使元素變形的屬性，其配合rotate(旋轉角度)、scale(縮放倍數)、skew(扭曲元素)等參數一起使用 語法：transform：rotate(旋轉角度) transform：scale(縮放倍數) （5）transition 功能：設置元素由樣式1轉變為樣式2的過程所需時間 語法：transition：duration 注意：這只是transition其中的一種用法，還有其它復雜的用法請查看本網站的《十天學會CSS3》課程查看全部
-
照片墻的制作步驟： （1）每張照片的位置是不一樣的 （2）每張照片有一定的旋轉角度 （3）照片陰影及緩慢旋轉、緩慢放大特效制作查看全部
-
使用css3實現：旋轉、縮放、陰影、動畫。查看全部
-
好的啊查看全部
-
贊贊贊贊贊贊贊贊查看全部
-
代碼 位置 旋轉 瀏覽器兼容查看全部
-
box-shadow 陰影 position 位置 transform旋轉 z-index 層次 transition改變過程時間查看全部
-
編程練習查看全部
-
transition查看全部
-
關鍵技術點查看全部
-
z-index查看全部
-
1.box-shadox 功能：給元素的邊框添加陰影效果 box-shadow:X軸偏移量 Y軸偏移量[陰影模糊半徑][陰影擴展半徑][陰影顏色][投影方式]給元素的邊框添加陰影效果 2.查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .mainDiv{ width:100px; height:50px; margin:50px auto; text-align: center; line-height: 50px; font-weight: bold; color:#ddd; background:#000; 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{ -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); background:red; color:black; } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html> //文字旋轉特效查看全部
-
注意兼容寫法 transform:rotate(720deg) scale(2); 旋轉角度為720deg和放大倍數為2。 -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transition:1s;動畫時間為1s -webkit-transition:1s; -moz-transition:1s;查看全部
-
transform: rotate旋轉角度 scale縮放倍數 skew扭曲元素 語法 transform:rotate旋轉角度 transform:scale縮放倍數查看全部
舉報
0/150
提交
取消