vue+css布局实现一个爱心照片墙效果代码
代码语言:html
所属分类:画廊相册
代码描述:vue+css布局实现一个爱心照片墙效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * {transition: all .3s ease;} /* 已下為愛心編排的CSS */ .love { width:650px;height:650px;margin:auto; transform:rotate(-45deg);-o-transform:rotate(-45deg); -ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); margin-top:-5%; } .love a { display:block;width:9.5%;height:9.5%; position:relative;overflow:hidden;margin-right:.5%;margin-bottom:.5%; border-radius:3px;background:#fccbd0;background:#e6616e;vertical-align:top; float:left; } .love a.adk {background:white;} .love a:before {content:"";width:120%;height:120%;background:red;position:absolute;z-index:999;opacity:0.5;top:0;left:0;display:none;} .love a:after {content:"";width:120%;height:120%;background:black;position:absolute;z-index:99;opacity:0.5;top:0;left:0;display:none;} .love a:hover:before ,.love a:hover:after {display:block;} .love a:nth-child(1) ,.love a:nth-child(n+50) {margin-left:10%;} .love a:nth-child(3) {margin-right:60%;} .love a:nth-child(7) ,.love a:nth-child(15) , .love a:nth-child(19) {margin-right:50%;} .love a:nth-child(8) ,.love a:nth-child(25) , .love a:nth-child(49) {clear:both;} .love a:nth-child(8) ,.love a:nth-child(10) , .love a:nth-child(14) ,.love a:nth-child(25) , .love a:nth-child(27) ,.love a:nth-child(29) , .love a:nth-child(33) ,.love a:nth-child(35) , .love a:nth-child(39) ,.love a:nth-child(49) , .love a:nth-child(n+50) {margin-top:-10%;} .love a:nth-child(n+51) {margin-left:40%;} .love a:nth-child(n+52) {margin-left:50%;} .love a:nth-child(n+53) {margin-left:80%;} /* 愛心變大 */ .love a:nth-child(6) ,.love a:nth-child(16) , .love a:nth-child(21) ,.love a:nth-child(24) , .love a:nth-child(43) ,.love a:nth-child(46) {width:19.5%;height:19.5%;} .love a img { width:100%;height:100%; transform:rotate(45deg) scale(1.42);; -o-transform:rotate(45deg) scale(1.42);; -ms-transform:rotate(45deg) scale(1.42);; -moz-transform:rotate(45deg) scale(1.42);; -webkit-transform:rotate(45deg) scale(1.42);; } @media (max-width: 1500px) { .love {width:500px;height:500px;} } @media (max-width: 800px) { .love {width:200px;height:200px; } </style> </head> <body> <div class="love"> <a target="new" :href="row.href" v-for="row in dataRow" :title="row.title"> <img :src="row.src" :alt="row.title" > </a> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script> var vm = new Vue({ el : ".love", data : { dataRow : [ { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/62ff45c2ce421.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/608013b6c1026.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/5fe5bbd800ea5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/62ff45c2ce421.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/608013b6c1026.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/5fe5bbd800ea5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", "src": "//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "href": "#" }, { "title": "李明月", .........完整代码请登录后点击上方下载按钮下载查看
网友评论0