前端知识
源码下载
软件工具
合作案例
AI代码
菜单
搜索
首页
前端知识
利用CSS3动画效果制作照片墙
利用CSS3动画效果制作照片墙
2024-04-05 09:04:12
前端知识
前端哥
134
601
我要收藏
【效果】
"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic2<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu2.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic3<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu3.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic4<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu4.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic5<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu5.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic6<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu6.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic7<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu7.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic8<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu8.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic9<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu9.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic10<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/tu10.jpg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>【CSS代码】</p> <pre><code class="prism language-html">/* CSS Document */ body{ background:#eee } h1{ text-align:center} .container{ width:960px; height:450px; margin:60px auto; position:relative} img{ padding:10px 10px 15px; background:#fff; border:1px solid #ddd; position:absolute; transition:1s; z-index:1 } img:hover{ transform:rotate(0deg); transform:scale(1.2); box-shadow:10px 10px 15px #ccc; z-index:2 } .pic1{ left:400px; top:0px; transform:rotate(-5deg) } .pic2{ left:600px; top:0px; transform:rotate(-20deg) } .pic3{ bottom:0px; right:0px; transform:rotate(5deg) } .pic4{ bottom:0px; left:300px; transform:rotate(-10deg) } .pic5{ bottom:0px; left:0px; transform:rotate(-10deg) } .pic6{ top: 0; left:0; transform: rotate(10deg); } .pic7{ top: 0; left: 850px; transform: rotate(20deg); } .pic8{ bottom: -20px; right: 630px; transform: rotate(5deg); } .pic9{ top: 190px; left: 550px; transform: rotate(15deg); } .pic10{ left:180px; top:20px; transform: rotate(-10deg); } </code></pre> </blockquote> <h3>【源码与图片素材】</h3> <blockquote> <p>https://download.csdn.net/download/muyuxifeng/87618635?spm=1001.2014.3001.5503</p> </blockquote> </div> <div class="article-declare"> 转载请注明出处或者链接地址：<a href="https://www.qianduange.cn//article/4477.html">https://www.qianduange.cn//article/4477.html</a> </div> <div class="share"> <div class="share-box"> <div class="share-text">分享到：</div> <div class="share-content" id="share-content"></div> </div> <div class="zan" class="zan"> <span class="zan-btn"> <i class="fa fa-thumbs-o-up"></i> <a class="dianzanshu digg_link" data-id="4477" data-mid="2" data-type="up" href="javascript:;"> <em class="digg_num icon-num">601</em> </a> <!-- <b class="dianzanshu">{news:digg}</b> --> </span> </div> </div> <div class="tags"> <div class="tags-name">标签</div> </div> <div class="next-up"> <div class="btn-box up"> <!-- <div class="up-title">上一篇</div> --> <div class="contents up-content"> <a href="https://www.qianduange.cn//article/1.html" >上一篇：HTML基本结构及基本标签</a> </div> </div> <div class="btn-box next"> <!-- <div class="up-title">下一篇</div> --> <div class="contents next-content"> <a href="https://www.qianduange.cn//article/4478.html" >下一篇：编程笔记 html5&css&js 062 JavaScript 如何使用</a> </div> </div> </div> </div> <!-- 预留评论区域 --> <div class="block message" id="pinglun"> <div class="block-name"> <i class="fa fa-pencil-square-o"></i> 评论 </div> <div class="message-content"> <div class="mac_comment" data-id="4477" data-mid="2" ></div> <script> $(function(){ MAC.Comment.Login = 1; MAC.Comment.Verify = 0; MAC.Comment.Init(); MAC.Comment.Show(1); }); </script> </div> </div> <!-- 预留评论区域 --> <div class="block relevant"> <div class="block-name">相关文章</div> <ul class="relevant-list"> <li> <h5> <a href="https://www.qianduange.cn//article/5338.html" title="vue全局自适应大小: postcss-pxtorem,vue2vue3通用适配">vue全局自适应大小: postcss-pxtorem,vue2vue3通用适配</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5324.html" title="前端date.locale is not a function错误解决办法">前端date.locale is not a function错误解决办法</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5320.html" title="antd form.setFieldsValue问题总结">antd form.setFieldsValue问题总结</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/1483.html" title="大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html jquery bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品">大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html jquery bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5304.html" title="Css3 3D转换">Css3 3D转换</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5301.html" title="【JavaWeb项目】简单搭建一个前端的博客系统">【JavaWeb项目】简单搭建一个前端的博客系统</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5297.html" title="小按钮大宇宙，分享几个宇宙风格的按钮动效，让你爱上CSS">小按钮大宇宙，分享几个宇宙风格的按钮动效，让你爱上CSS</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5296.html" title="css 画图之质感盒子">css 画图之质感盒子</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5295.html" title="限制文本只显示两行">限制文本只显示两行</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5294.html" title="前端技术中的几种居中方式">前端技术中的几种居中方式</a> </h5> </li> </ul> </div> </div> <div class="main-right"> <div class="block user"> <div class="user-name"> <h3> <a href="https://www.qianduange.cn//index.php/cover/info/id/1" title="前端哥"> <img src="https://www.qianduange.cn///static/images/touxiang.png" alt="前端哥"> <p class="name">前端哥</p> </a> </h3> <div class="user-info"></div> </div> </div> <div class="block mytui" style="margin-top: 24px;"> <div class="tui tui-index-1"> <script src="/template/bolg/ads/detail_1.js"></script> </div> </div> <div class="block user-article"> <div class="block-name">发布的文章</div> <div class="blog-article"> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5378.html" title="Python 控制机器狗实现基本动作（前进，后退，向左，向右）">Python 控制机器狗实现基本动作（前进，后退，向左，向右）</a> </h4> <p class="promote-titme">2024-04-20 08:04:44</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5377.html" title="【Java】SpringMVC参数接收（二）：JSON、URI、文件">【Java】SpringMVC参数接收（二）：JSON、URI、文件</a> </h4> <p class="promote-titme">2024-04-19 21:04:31</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5376.html" title="微信开发者工具报错： app.json: 在项目根目录未找到 app.json (env: Windows,mp,1.06.2303220； lib: 2.30.4)">微信开发者工具报错： app.json: 在项目根目录未找到 app.json (env: Windows,mp,1.06.2303220； lib: 2.30.4)</a> </h4> <p class="promote-titme">2024-04-19 21:04:10</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5375.html" title="关于JSONObject和String类型的相互转换">关于JSONObject和String类型的相互转换</a> </h4> <p class="promote-titme">2024-04-19 21:04:10</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5374.html" title="java解析超大json文件数据">java解析超大json文件数据</a> </h4> <p class="promote-titme">2024-04-19 21:04:10</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5373.html" title="vscode json文件添加注释报错">vscode json文件添加注释报错</a> </h4> <p class="promote-titme">2024-04-19 21:04:51</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5372.html" title="头歌-JavaScript基础">头歌-JavaScript基础</a> </h4> <p class="promote-titme">2024-04-19 21:04:54</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5371.html" title="VScode,右上方三角形的运行和调试消失不见【1.C/C 插件中Intelli Sense Engine与setting.json中的同步问题 2.,右上方三角形的运行和调试被隐藏的问题】">VScode,右上方三角形的运行和调试消失不见【1.C/C 插件中Intelli Sense Engine与setting.json中的同步问题 2.,右上方三角形的运行和调试被隐藏的问题】</a> </h4> <p class="promote-titme">2024-04-19 21:04:46</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5370.html" title="notepad 安装json格式化插件(Jsonviewer)的两种方式">notepad 安装json格式化插件(Jsonviewer)的两种方式</a> </h4> <p class="promote-titme">2024-04-19 21:04:41</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5369.html" title="C#Json序列化及反序列化">C#Json序列化及反序列化</a> </h4> <p class="promote-titme">2024-04-19 21:04:40</p> </div> </div> </div> <div class="block mytui" style="margin-top: 24px;"> <div class="tui tui-index-1"> <script src="/template/bolg/ads/detail_2.js"></script> </div> </div> <div class="block user-article"> <div class="block-name">大家推荐的文章</div> <div class="paihang-list"> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/4565.html" title="js数组常用方法（19种）|你会的到底有多少呢？"> <span class="hot-index">1</span> <p class="article-title">js数组常用方法（19种）|你会的到底有多少呢？</p> <p class="updateTime">2024-04-08 11:04:21<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/3152.html" title="【Echarts系列】—— 实现电池图、3D立体圆形柱状图"> <span class="hot-index">2</span> <p class="article-title">【Echarts系列】—— 实现电池图、3D立体圆形柱状图</p> <p class="updateTime">2024-03-03 11:03:01<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/2173.html" title="ECharts 饼状图颜色设置"> <span class="hot-index">3</span> <p class="article-title">ECharts 饼状图颜色设置</p> <p class="updateTime">2024-02-16 14:02:00<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/1884.html" title="echarts实现动态渲染多柱图"> <span class="hot-index">4</span> <p class="article-title">echarts实现动态渲染多柱图</p> <p class="updateTime">2024-02-12 14:02:34<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/1430.html" title="移动端css布局大全"> <span class="hot-index">5</span> <p class="article-title">移动端css布局大全</p> <p class="updateTime">2024-02-06 15:02:42<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/1267.html" title="使用HTML5和JS实现日期下拉框功能"> <span class="hot-index">6</span> <p class="article-title">使用HTML5和JS实现日期下拉框功能</p> <p class="updateTime">2024-02-04 11:02:52<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/586.html" title="JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js"> <span class="hot-index">7</span> <p class="article-title">JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js</p> <p class="updateTime">2024-01-27 01:01:18<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/4486.html" title="vue实现可输入可下拉选择的组件"> <span class="hot-index">8</span> <p class="article-title">vue实现可输入可下拉选择的组件</p> <p class="updateTime">2024-04-05 09:04:35<span class="zan"><i class="fa fa-thumbs-o-up"></i>999</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/3752.html" title="echarts 图表，定时器实现数据实时动态"> <span class="hot-index">9</span> <p class="article-title">echarts 图表，定时器实现数据实时动态</p> <p class="updateTime">2024-03-13 00:03:28<span class="zan"><i class="fa fa-thumbs-o-up"></i>999</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/3693.html" title="jQuery事件处理"> <span class="hot-index">10</span> <p class="article-title">jQuery事件处理</p> <p class="updateTime">2024-03-12 01:03:32<span class="zan"><i class="fa fa-thumbs-o-up"></i>999</span></p> </a> </h5> </div> </div> </div> </div> </div> </div> <!-- main结束 --> <!-- footer --> <div class="footer"> <div class="foot"> <p class="items"> <span><a href="https://www.qianduange.cn//rss/index.xml" title="rss订阅">rss订阅</a></span> <span><a href="https://www.qianduange.cn//rss/baidu.xml" title="百度xml">百度xml</a></span> <span><a href="https://www.qianduange.cn//rss/google.xml" title="谷歌xml">谷歌xml</a></span> <span><a href="https://www.qianduange.cn//rss/sogou.xml" title="搜狗xml">搜狗xml</a></span> <span><a href="https://www.qianduange.cn//rss/so.xml" title="soxml">soxml</a></span> <span><a href="https://www.qianduange.cn//rss/sm.xml" title="神马搜索xml">神马搜索xml</a></span> <span><a href="https://www.qianduange.cn//map.html" title="网站地图">网站地图</a></span> </p> <p class="items"> <span>Copyright © 2018-2022 前端哥</span> <span><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fd8cbb00c569d2289ab4b9572746ebeb"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></span> <span><a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2023000550号-1</a></span> <span> <a href="https://www.qianduange.cn//" title="前端哥">前端哥</a> </span> </p> <p class="suibi">讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！</p> </div> <div class="mobile-footr"> <p class="items"> 前端技术交流源码工具分享网站 </p> </div> </div> <div class="guide"> <div class="guide-wrap"> <a href="javascript:;" class="nav-link edit mac_user" id="user" title="会员中心"><span>会员中心</span></a> <a href="https://www.qianduange.cn//label/contactMe.html" class="find" title="联系我"><span>联系我</span></a> <a href="https://www.qianduange.cn//index.php/gbook/index.html" class="report" title="留言建议"><span>留言建议</span></a> <a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a> </div> </div> <span style="display: none;" class="mac_timming" data-file="" ></span> <script> var userAgent = IEVersion(); if (userAgent <= 11) { location.href = "/browser.html"; } function IEVersion() { var userAgent = navigator.userAgent; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if (isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if (fIEVersion == 7) { return 7; } else if (fIEVersion == 8) { return 8; } else if (fIEVersion == 9) { return 9; } else if (fIEVersion == 10) { return 10; } else { return 6; } } else if (isEdge) { return 100; } else if (isIE11) { return 11; } else { return 1000; } } </script> <!-- footer结束 --> <!-- 遮罩层 --> <div class="mask"> <div class="close"></div> </div> <!-- 复制成功提醒 --> <div class="tips"> <div class="tips-text">复制成功！</div> </div> <span style="display:none" class="mac_ulog_set" alt="设置内容页浏览记录" data-type="1" data-mid="2" data-id="4477" data-sid="0" data-nid="0"></span> <span style="display:none" class="mac_history_set" alt="设置History历史记录" data-name="[前端知识]利用CSS3动画效果制作照片墙" data-pic="/"></span> <script> hljs.highlightAll(); hljs.initLineNumbersOnLoad({ singleLine:true, startFrom: 5, }); </script> <script> $(function (){ $('#share-content').share({sites: ['qzone', 'qq', 'weibo','wechat']}); setTimeout(function () { setSizeEvent(); },500) }); $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; function setSizeEvent(){ let pagew = $(".pagelist").width(); let width = $(".page").width(); let left = (width - pagew) / 2; $(".pagelist").css({"left":left}); let lheight = $(".main-let").height(); let rheight = $(".main-right").height(); if(lheight > rheight){ $(".main-right").height(lheight); } else if(rheight > lheight){ $(".main-let").height(rheight); } let bodyWidth = document.body.offsetWidth; if(bodyWidth < 1080){ $(".main-let").css({"height":"auto"}); } } $(".page").resize(function(){ setSizeEvent(); }); var viewer = new Viewer(document.getElementById('article-content'), { url: 'src' }); </script> <script> let code = []; $(".article-content").find("pre").each(function (){ code.push($(this).find("code").html()); }); </script> </body> </html>
