您现在的位置是：网站首页> 编程资料编程资料

CSS3制作精致的照片墙特效_css3_CSS_网页制作_

2021-09-13 991人已围观

简介这篇文章主要为大家详细介绍了CSS3制作漂亮的照片墙的具体步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享利用CSS3动画制作照片墙的详细步骤，供大家参考，具体内容如下

第一种实现效果：

Html代码如下:

XML/HTML Code复制内容到剪贴板

<body>
<h2>照片墙制作h2>
<div class="container">
<img class="img1" src="img/img (1).jpg" height="150" width="150" alt="">
<img class="img2" src="img/img (2).jpg" height="160" width="200" alt="">
<img class="img3" src="img/img (3).jpg" height="170" width="200" alt="">
<img class="img4" src="img/img (4).jpg" height="240" width="200" alt="">
<img class="img5" src="img/img (5).jpg" height="300" width="300" alt="">
div>
body>

CSS代码如下:

CSS Code复制内容到剪贴板

效果图:

第二种实现效果：

第一部分：HTML

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

XML/HTML Code复制内容到剪贴板

<div class="content">
<img class="pic1" src="img/1.jpg" />
<img class="pic2" src="img/2.jpg" />
<img class="pic3" src="img/3.jpg" />
<img class="pic4" src="img/4.jpg" />
<img class="pic5" src="img/5.jpg" />
<img class="pic6" src="img/6.jpg" />
<img class="pic7" src="img/7.jpg" />
<img class="pic8" src="img/8.jpg" />
<img class="pic9" src="img/9.jpg" />
<img class="pic10" src="img/10.jpg" />
div>

第二部分：CSS3

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

CSS3的旋转 rotate
CSS3的缩放 scale
CSS3的阴影 box-shadow

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

CSS Code复制内容到剪贴板

body{
background: url(../img/bg1.jpg) no-repeat top center fixed;
提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：CSS3轻松实现清新 Loading 效果的简单实例_css3_CSS_网页制作_

下一篇：CSS实现曲面阴影效果的简单实例(推荐)_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网