CSS3 简易照片墙

最新推荐文章于 2022-06-03 01:01:55 发布
最新推荐文章于 2022-06-03 01:01:55 发布
阅读量407 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenshuangwtt/article/details/43234083
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3图片墙</title>
    <style>
        body{
            background-color:#eee;
        }

        h1{
            text-align:center;
        }

        .container{
            width:960px;
            height:450px;
            margin:60px auto;
            position:relative;
        }

        .container img{
            padding:10px 10px 15px;
            background:white;
            border:1px solid #ddd;
            box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
            -webkit-transition:all 0.5s ease-in;
            -moz-transition:all 0.5s ease-in;
            transition:all 0.5s ease-in;
            position:absolute;
            z-index:1;
        }

        .container img:hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            z-index:2;
        }

        .pic1{
            left: 400px;
            top: 0;
            -webkit-transform: rotate(-5deg);
            -moz-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }

        .pic2{
            top: 0;
            left: 600px;
            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }

        .pic3
        {
            bottom: 0;
            right: 0;
            -webkit-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        .pic4
        {
            bottom:0;
            left:300px;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }

        .pic5
        {
            bottom: 0;
            left: 0;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }

        .pic6
        {
            top: 0;
            left:0;
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            transform: rotate(10deg);
        }

        .pic7
        {
            top: 0;
            left: 850px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);
        }

        .pic8
        {
            bottom: -20px;
            right: 630px;
            -webkit-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        .pic9
        {
            top: 90px;
            left: 550px;
            -webkit-transform: rotate(15deg);
            -moz-transform: rotate(15deg);
            transform: rotate(15deg);
        }

        .pic10
        {
            left:180px;
            top:20px;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }


    </style>
</head>
<body>
    <h1>照片墙</h1>
    <div class="container">
        <img class="pic pic1" src="images/mm1.jpg">
        <img class="pic pic2" src="images/mm2.jpg">
        <img class="pic pic3" src="images/mm3.jpg">
        <img class="pic pic4" src="images/mm4.jpg">
        <img class="pic pic5" src="images/mm5.jpg">
        <img class="pic pic6" src="images/mm6.jpg">
        <img class="pic pic7" src="images/mm7.jpg">
        <img class="pic pic8" src="images/mm8.jpg">
        <img class="pic pic9" src="images/mm9.jpg">
        <img class="pic pic10" src="images/mm10.jpg">
    </div>
</body>
</html>


在路上_等你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
16个实用的CSS样式之3D照片墙
Web_boom的博客
09-23 1514
到此为止一个简单的3D照片墙就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
超详细的纯CSS的照片墙特效
Amy_Z的博客
08-07 7060
超详细的纯CSS的照片墙特效 你好，欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效，然后在一个页面上放了多张就形成了一个照片墙，效果如下： 鼠标悬浮到照片上还可以将图片进行缩放，底部文字也可以进行更改哦~现在我们就来详细讲解一下吧 注意事项 个人使用的开发工具：Hbuilder （小伙伴们注意哦~我们前端并不是那么依赖开发工具用记事本都可以...
20行html代码加40行css代码实现照片墙页面（鼠标hover实现旋转缩放）
weixin_33937913的博客
12-20 222
为什么80%的码农都做不了架构师？>>> ...
每月两个小小项目——CSS3简易照片墙
AIWWY的博客
03-26 279
项目实现图片GIF 项目思想 把25张名为0.jpg~24.jpg的图片放入25个li标签中，按5行5列在ul中排列，之后通过Math.random设置每张图片的translate、rotate值，之后绑定点击事件 简洁版的是将每张图片还原到未设置translate、rotate值之前，然后将每张图片的src设置为点击图片地址，再将其定位到0，0位置并改变宽高为ul宽高，即25张相同的图片覆盖到一起了，再次点击，通过拿到li的序号还原位置加重新设置translate等值。 详细版的是将点击.
旋转立方体做简易照片墙
Alisastudyhard的博客
11-16 328
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...
vue 简易照片墙
qq_28190039的博客
09-03 3307
部门平台首页弄个照片墙展示人员风采，组件代码如下： <template> <div class="photo"> <div class="container" v-for="(path, cl) in info"> <div :class="`box imgi ${status1} ${status2 + cl}` " ref="path"><img :src="path"></div> </
利用原生js实现简易照片墙
belle_mei的博客
06-06 929
效果演示 基本布局 <ul id="pic"> <li> <img data-index="0" src="./images/pic1.jpg" alt=""> </li> <li> <img data-index="1" src="./images/pic2.jpg" alt=""> </li>
HTML+CSS 旋转照片墙！源代码（简易动画干货快收藏！！）
m0_67391870的博客
06-03 1379
拿走请三连，并注明出处新手上路，路过的大佬请多多指教~动画特效为11张照片，环绕着旋转（照片可自改添加，源代码中用到的照片未上传）照片墙body{margin:0px;}#di
纯css3实现照片墙效果
09-25
主要介绍了纯css3实现照片墙效果，鼠标悬浮时旋转放大并摆正，主要使用到的css3属性有：transition、transform（scale、rotateZ）、box-shadow以及z-index，推荐给小伙伴们
CSS3简单实现照片墙
09-25
标题中的“CSS3简单实现照片墙”指的是使用CSS3（层叠样式表第三版）技术来创建一个展示多张图片的布局，这种布局通常被称为照片墙或者图片网格。照片墙的效果是图片以一种美观且富有创意的方式排列在页面上，用户...
css3实现照片墙
11-21
要实现CSS3照片墙，我们需要掌握以下几个关键知识点： 1. **Flexbox布局**：CSS3中的Flexible Box布局模型，简称Flexbox，为创建弹性容器和其子元素提供了强大工具。在照片墙中，我们可以使用Flexbox来轻松地调整...
css动态照片墙.rar
09-01
3. **CSS动画**：动态效果是照片墙的核心特征。可以使用CSS关键帧动画（@keyframes）来实现图片的入场、退出、平移、缩放等动画效果。例如，图片载入时可以淡入显示，鼠标悬停时可以放大或旋转。 4. **图片懒加载**...
CSS3制作精致的照片墙特效
09-27
主要为大家详细介绍了CSS3制作漂亮的照片墙的具体步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery简易照片墙
yf19990720的博客
08-12 411
jQuery照片墙 照片墙在网络上也是非常常见的东西，各式各样的照片墙，有着各式各样的新奇的特效 照片墙效果图 点击要查看的图片，然后图片放大，再次点击后还原 代码分析 首先设置出最开始的样式 <style> * { padding: 0; margin: 0; list-style: none; } html, body,
matlab下载.pdf
07-14
matlab下载下载方式及注意事项
Android系统原理及开发要点详解-从入门到精通
07-13
Android系统原理及开发要点详解 Java4 Android视频教程 Android开发视频教学 从入门到精通 Android的软件管理器的开发教程视频 Android深入浅出_Android高端课程分享试听 JavaWeb Android系统的手机防盗软件的实现 Android开发入门与实战随书视频 视频列表.txt 0.0MB 开发入门与实战代码.rar 6.1MB 第9章 我来“广播”你的“意图”——Intent和Broadcast面对面.wmv 15.1MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-2.wmv 0.6MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-1.wmv 24.3MB 第8章 移动信息仓库——Android的数据存储操作之Android数据存储概述.wmv 57.7MB 第7章 良好的学习开端——Android基本组件介绍之友好地互动交流——对话框(Dialog)介绍与实例-2.wmv 7.
GESP等级认证 2024年6月 C++一级真题
最新发布
07-14
GESP等级认证 2024年6月 C++一级真题 从官网上刚刚下载下来的,题都是热乎的,这可是最新真题 大家看一看瞧一瞧,走过路过不要错过,免费下载,全篇无水印,不好用随便吐槽我! 涵盖选择题,判断题,编程题,基础知识多,满满的干货,非常建议下载!!!!! 萌新小白来做做题,复习巩固都很合适!

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值