HTML第二十节（CSS制作照片墙效果与瀑布流）

最新推荐文章于 2024-07-27 23:01:21 发布

qq_24249259

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量4.3k

点赞数 3

分类专栏： HTML基础

本文链接：https://blog.csdn.net/qq_24249259/article/details/46419023

版权

本文介绍了如何使用CSS3的transform、transition和z-index属性制作照片墙效果，详细解释了各属性的作用和使用方法。同时，还展示了如何通过column-width实现瀑布流布局，包括相关CSS样式设置和实例代码。

摘要由CSDN通过智能技术生成

CSS3制作照片墙
1.用CSS制作照片墙需要用到两个重要属性：transform和transition。transform属性允许旋转(rotate)、伸缩(scale)、倾斜(skew)或者移动(translate)元素。transition(“过渡”)使属性值在指定时间内平滑地完成变化。可以配置4个属性：transition-property，指定过渡效果所应用的属性；transition-duration，指定完成变化的时间；transition-timing-function，描述属性值的变化速度，常用值包括ease(默认，逐渐变慢)，linear(匀速变化)，ease-in(加速变化)，ease-out(减速变化)，ease-in-out(加速然后减速)。

2.还要用到一个重要属性是z-index，该属性配置元素堆叠顺序，属性值为数字，数值越大显示得越在上。用一个div作为父容器来包含所有图片，将position设为relative；注意要为每张图片分配一个class(必须用class才能实现图片伸缩)，为每张图片配置position为absolute。还需要注意不同浏览器的内核支持问题。

3.代码示例如下：


<html lang="zh-CN">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>照片墙</title>  
        <style>  
            body{  
                background: #eee;}  
            .container{  
                width:960px;  
                height:450px;  
                margin: 60px auto;  
                position:relative;}  
            img{  
                width:240px;  
                height:180px;  
                padding: 10px 10px 15px 10px;  
                border: 1px solid #ddd;  
                position:absolute;  
                transition:1s;  
                -moz-transition:1s;  
                -webkit-tr