纯CSS3实现图片墙

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

crper

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

阅读量4.2k

点赞数 2

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： CSS3图片墙 CSS3图片图片墙 CSS3动画

本文链接：https://blog.csdn.net/crper/article/details/46331863

版权

该博客介绍了如何利用CSS3的transform、transition属性及display属性，创建一个具有动画过渡效果的图片墙。通过初始化凌乱的图片布局，当鼠标悬浮在图片上时，图片会移动到顶层并放大1.5倍。作者提到了素材获取的建议，并分享了包含注释的HTML和CSS代码。此外，还推荐了用于自动补全CSS前缀和整理CSS代码的插件。

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

预备知识

DIV+CSS基础
CSS3的transform 和 transition用法
- 主要是用了transform的rotate/scale
- 动画过渡的几个参数(transition-property/transition-duration/ transition-timing-function)
CSS3的box-shadow

值得一提的:更多属性的参数要查询css手册,这里展示只是会用到的;

素材获取

百度自行搜索图片素材,替换下面代码的图片路径即可…
例子中的图片大于400像素小于600像素,其中480X270居多

效果描述

初始化凌乱的图片排序(CSS控制),鼠标悬浮会让图片处于顶层显示,且图片恢复水平展示+放大1.5倍

效果图

代码实现

代码内含注释

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS3实现照片墙</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>纯CSS3实现照片墙</h1>
    <div id="container">
      <img class="position_pic1" src="img/1.jpg" alt="这是一个美眉的图片">
      <img class="position_pic2" src="img/2.jpg" alt="这是一个美眉的图片"