20150810 CSS3实现照片墙+图片阴影+按钮特效

CSS3绚丽照片墙

使用技术：旋转、缩放、阴影、动画
制作步骤：照片位置+照片旋转角度+照片阴影及缓慢旋转、缓慢放大特效
关键点：box-shadow加阴影左右、上下、模糊尺寸、颜色 position绝对定位 z-index上下

层显示顺序 transform变形：配合rotate旋转、scale缩放、skew扭曲等一起使用 
transition动画时间

CSS3实现“图片阴影”效果

曲线阴影：底边有弧度的阴影  
border-radius:100px/10px水平方向100px，垂直方向10px border-radius:100px 10px左上右下100px，右上左下10px 
直角阴影、内部阴影写在原盒子上，曲线阴影新增一个盒子，通过设置圆角、阴影、大小、定位、上下层顺序来使其正常显示，如下：
 .effect:before, .effect:after{
    content:"";
position:absolute; 
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
-ms-border-radius:100px / 10px;
-webkit-border-radius:100px / 10px;
}
翘边阴影：四角有翘起来
直角阴影、内部阴影写在原盒子上，翘边阴影新增两个盒子，通过设置变形transform 

skew沿着X和Y做2D的倾斜转换、阴影、大小、定位、上下层顺序来使其正常显示，如下：
ul.box li:before { 
z-index: -2;  
position: absolute; 
background: transparent; 
width: 90%; 
height: 80%; 
content: ''; 
left: 20px; 
bottom:8px; 
-webkit-transform: skew(-12deg) rotate(-4deg); 
-moz-transform:skew(-12deg) rotate(-4deg); 
-o-transform: skew(-12deg) rotate(-4deg); 
-ms-transform: skew(-12deg) rotate(-4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
ul.box li:after { 
z-index: -1; 
position: absolute; 
background: transparent; 
width: 90%; 
height: 80%; 
content: ''; 
right:20px;  
bottom:8px;
-webkit-transform: skew(12deg) rotate(4deg); 
-moz-transform:skew(12deg) rotate(4deg); 
-o-transform: skew(12deg) rotate(4deg); 
-ms-transform: skew(12deg) rotate(4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); 
}

CSS3实现按钮特效

三角形：width:0;height:0;overflow:hidden;border:7px solid transparent;朝下border-top-color:#2DCB70;朝左border-right-color:#2DCB70;朝右border-left-color:#2DCB70;朝上border-bottom-color:#2DCB70;
传统input标签：button/submit/reset不同的操作系统表单的默认样式不同。如果用Input


标签做贴图，需固定宽高，submit/reset有其默认的动作。
input标签制作按钮缺点：1宽度无法自适应、2没有交互效果。
使用标签制作按钮的优点：1没有默认事件、2可以用CSS模拟成按钮外观，并做到宽度


自适应、3可以增加上交互效果，且浏览器均兼容。