-
分析照片墙的制作步骤查看全部
-
分析照片墙的制作步骤查看全部
-
.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; }查看全部
-
变形过程--时间 transition:duration查看全部
-
变形---查看全部
-
transform查看全部
-
z-index查看全部
-
box-shadow查看全部
-
position查看全部
-
制作步骤查看全部
-
transform:rotate(5deg) 旋转角度 transform:scale(2) 放大倍数 transition:1s 过渡时间 -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.旋转角度 3.阴影，缓慢旋转，缓慢放大查看全部
-
transition 过渡效果查看全部
举报
0/150
提交
取消