CSS3制作漂亮的照片墙

来源：动视网责编：小采时间：2020-11-27 16:41:19

CSS3制作漂亮的照片墙

CSS3制作漂亮的照片墙:CSS3可以做动画大家肯定都是耳熟能详的了，但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢？那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧！第一部分：HTML 这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！）

推荐度：

点击下载本文 文档为doc格式

导读CSS3制作漂亮的照片墙:CSS3可以做动画大家肯定都是耳熟能详的了，但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢？那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧！第一部分：HTML 这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！）

CSS3可以做动画大家肯定都是耳熟能详的了，但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢？

那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧！

第一部分：HTML

这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！）

第二部分：CSS3

这一部分就是我们这节的重点了，如上图所示照片的位置各不相同，我们肯定会用到CSS3一下的知识点：

CSS3的旋转 rotate

CSS3的缩放 scale

CSS3的阴影 box-shadow

没错就是这些功能我们就可以做一个漂亮的照片墙了。来看看我们的代码吧，这里只展示部分代码了聪明的小伙伴肯定知道怎么做的！

body{
 background: url(../img/bg1.jpg) no-repeat top center fixed;
 background-size: 100% auto;
}
.content{
 width: 900px; 
 height: 1000px;
 overflow: hidden; 
 margin: 100px auto; 
 position: relative;
}
img{ 
 z-index: 1;
 width: 20%;
 height: auto;
 position: absolute;
 padding: 10px 10px 15px 10px;
 background: #ffffff;
 border: 1px solid #CCCCCC;
 /* 动画的时间 */
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
 transition: 0.5s;
 }
img:hover{
 z-index: 2;
 transform: scale(1.5);
 -moz-transform: scale(1.5) ;
 -webkit-transform: scale(1.5) ;
 box-shadow: -10px 10px 20px #000000;
 -moz-box-shadow: -10px 10px 20px #000000;
 -webkit-box-shadow: -10px 10px 20px #000000;
}
.pic1{
 left: 100px;
 top: 50px;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 transform: rotate(20deg);
}
.pic2{
 left: 280px;
 top: 60px;
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 transform: rotate(-10deg);
}

/* 下面的代码大同小异就不依依展示了 */

就是这么简单的代码就可以实现上图所示的效果了。小伙伴们有兴趣的自己动手尝试一下把自己的靓照放上去看看。

PS： CSS3还可以写出更多的精彩绚丽效果，小伙伴有兴趣可以深入的研究一下！

有需要Demo的小伙伴给我留言吧，这次不提供下载了！

也可以加入我的QQ群在群文件下载吧！点击加入

CSS3制作漂亮的照片墙

推荐度：

点击下载本文 文档为doc格式

标签： css3 css3制作漂亮的照片制作漂亮的照片墙

热门焦点

CSS3制作漂亮的照片墙

CSS3制作漂亮的照片墙

第一部分：HTML

第二部分：CSS3

CSS3制作漂亮的照片墙

最新推荐

猜你喜欢

热门推荐