-
分析照片墻的制作步驟查看全部
-
分析照片墻的制作步驟查看全部
-
.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(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); background:#F00; color:#000; }查看全部
-
變形過程--時(shí)間 transition:duration查看全部
-
變形---查看全部
-
transform查看全部
-
z-index查看全部
-
box-shadow查看全部
-
position查看全部
-
制作步驟查看全部
-
transform:rotate(5deg) 旋轉(zhuǎn)角度 transform:scale(2) 放大倍數(shù) transition:1s 過渡時(shí)間 -webkit- -moz-查看全部
-
<style type="text/css"> h1{padding:0;margin:0; font-weight:normal;} body{background-color:#eee;} h1{text-algin:center;} .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; } </style> <body> <h1>照片墻制作</h1> <div class="container"> <img src="images/mm1.jpg" /> </div> </body>查看全部
-
z-index查看全部
-
制作步驟： 1.位置 2.旋轉(zhuǎn)角度 3.陰影，緩慢旋轉(zhuǎn)，緩慢放大查看全部
-
transition 過渡效果查看全部
舉報(bào)
0/150
提交
取消