利用css3制作简易的电子相册封面

利用css3的部分效果制作简易电子相册：
常规部分：

body{
  background-image:url(xx);
  background-size:100%/*控制背景的大小，可取像素值也可取百分制*/
 }

背景图案效果.png

制作边框的部分：

.xiangkang{
 width:410px;
 padding:10px 10px 20px 10px ;/*便于美观设计的距离，可以根据页面或需求修改*/
 border:2px solid #bfbfbf;/*颜色根据或边框的风格根据喜好修改*/
 box-shadow:4px 4px 4px #aaaaaa;/*添加阴影部分（css3）*/
 } 

初步边框效果.png

插入图片：

/*要两个div属性值*/

下面就是利用css3的旋转制造出效果：

.tupian1{
  float:left;
  -webkit-transform:rotate(7deg);/*IE9*/
  -ms-transform:rotate(7deg);/*Firefox*/
  -moz-transform:rotate(7deg);/*Safari and Chrome*/
  -o-transform:rotate(7deg);/*Opera*/
   transform:rotate(7deg);/*常规语法，前面几类针对不同的浏览器要考虑到兼容性的问题*/
 }

左旋转.png

于是左边的大图就制作完了。

类似的右边：

.tupian1{
  float:left;
  -webkit-transform:rotate(-8deg);
  -ms-transform:rotate(-8deg);
  -moz-transform:rotate(-8deg);
  -o-transform:rotate(-8deg);
   transform:rotate(-8deg);
 }

正面.png

（可用position属性对位置进行调整）

对于右边部分可以增加一些元素：

右边.png

    .r{
    float:right;/*让图片右浮动*/
    margin-right:10px;/*分离每一张图片让布局看起来美观*/
    width:auto;/*便于鼠标移动到图片时边框不受影响*/
    border:2px solid #bfbfbf;
    box-shadow:4px 4px 4px #aaaaaa;
    }

当鼠标移动到右边的小图时，可以将图片进行放大观察处理：

    div.r img:hover{/*针对Div中的图片（img）进行一个hover操作*/
    width:200px;
    height:200px;
    }

当鼠标移动到图片时就会产生此类效果。

效果.png