-
z-index：元素上下層顯示順序查看全部
-
position：元素位置定位。主要使用絕對定位查看全部
-
box-shadow 陰影制作查看全部
-
使用padding和背景色進行邊框的添加查看全部
-
transform:rotate(30deg); 順時針旋轉30° transform:scale(1.2); 放大1.2倍 transition:1s; 動畫從樣式1到樣式2的時間 box-shadow: 10px 11px 12px 13px #ccc; 盒子陰影 -webkit- 谷歌內核 -moz- 火狐內核 .container{width:960px;height:450px;margin:60px suto; position:relative;} img{padding:10px 10px 15px; background-color:#fff; border:1px solid #ddd;position:absolute; top:50px;left:200px;transform:rotate(20deg);-webkit-transform:rotate(20deg); -moz-transform:rotate(20deg) ;transition:1s ; -webkit-transition:1s ; -moz-transition:1s ; cursor:pointer;z-index:1; } img:hover{transform:rotate(0deg);-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg) ; transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2); box-shadow:2px 2px 2px #ccc;-webkit-box-shadow:2px 2px 2px #ccc;-moz-box-shadow:2px 2px 2px #ccc;z-index:100; }查看全部
-
transform:rotate(30deg); 順時針旋轉30° transform:scale(1.2); 放大1.2倍 transition:1s; 動畫從樣式1到樣式2的時間 box-shadow: 10px 11px 12px 13px #ccc; 盒子陰影 -webkit- 谷歌內核 -moz- 火狐內核查看全部
-
box-shadow 給元素的邊框添加陰影的效果 position 給元素定位，主要用到絕對定位 z-index 設置元素 的上下層顯示順序 transform 使元素變形的屬性 transition設置元素由樣式1轉變為樣式2的過程查看全部
-
制作步驟： 每張照片的位置不一樣 每張照片有一定的旋轉角度 照片陰影及緩慢旋轉、緩慢放大的特效制作查看全部
-
CSS3中的transform： transform.rotate(旋轉角度); transform.scale(縮放倍數); transform.skew(扭曲元素);查看全部
-
-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;查看全部
-
<!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{ -webkit-transform:rotate(720deg) scale(1.2); -moz-transform:rotate(720deg) scale(1.2); transform:rotate(720deg) scale(1.2); -webkit-transition:ease-in; -moz-transition:ease-in; transition:ease-in; background:red; } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html>查看全部
-
CSS3旋轉特效 <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:1s; -moz-transition:1s; transition:1s; } .mainDiv:hover{ background:red; color:black; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); } </style>查看全部
-
制作步驟查看全部
-
關鍵技術點查看全部
-
關鍵技術點查看全部
舉報
0/150
提交
取消