html实现好看的照片墙

照片可缩放可移动

效果：鼠标没进入之前的效果

鼠标悬浮在某一张图片之上

当鼠标移动时里面的图片也是可以移动的，如果你不想要这种效果，把js代码去掉就好了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {width: 100%;}body {font-size: 40px;font-family: 'Bungee Shade', cursive;color: #222;background: #222;}.box {position: relative;overflow: hidden;cursor: pointer;float: left;}.box:hover .border {-webkit-transform: scale(0.94);transform: scale(0.94);-webkit-transition-duration: 140ms;transition-duration: 140ms;}.box:hover .text {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition-duration: 140ms;transition-duration: 140ms;}.box:hover .image-wrap {-webkit-transform: scale(1);transform: scale(1);opacity: 1;-webkit-transition-duration: 140ms;transition-duration: 140ms;}.border,.text,.image {width: 100%;height: 100%;position: absolute;pointer-events: none;}.image-wrap {position: absolute;width: 130%;height: 130%;left: -15%;top: -15%;-webkit-transform: scale(0.8);transform: scale(0.8);-webkit-transition: 280ms ease-out;transition: 280ms ease-out;pointer-events: none;opacity: 0.74;}.border {left: -30px;top: -30px;border: 30px solid #222;box-sizing: content-box;-webkit-transition: 360ms ease-in-out;transition: 360ms ease-in-out;}.text {display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;opacity: 0;-webkit-transform: translate3d(0, -4%, 0);transform: translate3d(0, -4%, 0);-webkit-transition: 280ms ease-out;transition: 280ms ease-out;text-align: center;}.image {background-size: cover;}/* box sizing */.box {width: 100%;height: 100vw;float: left;}@media (min-width: 500px) {.box {width: 50%;height: 50vw;}}@media (min-width: 800px) {.box {width: 33.333333%;height: 33.33333vw;}}@media (min-width: 1200px) {.box {width: 25%;height: 25vw;}}/* image backgrounds */.image-0 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_0.jpg);}.image-1 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_1.jpg);}.image-2 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_2.jpg);}.image-3 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_3.jpg);}.image-4 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_4.jpg);}.image-5 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_5.jpg);}.image-6 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_6.jpg);}.image-7 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_7.jpg);}.image-8 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_8.jpg);}.image-9 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_9.jpg);}.image-10 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_10.jpg);}.image-11 {background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/box-image_11.jpg);}</style>
</head><body><div class="box"><div class="image-wrap"><div class="image image-0"></div></div><div class="border"></div><div class="text"><span>Sugar plum</span></div></div><div class="box"><div class="image-wrap"><div class="image image-1"></div></div><div class="border"></div><div class="text"><span>apple pie</span></div></div><div class="box"><div class="image-wrap"><div class="image image-2"></div></div><div class="border"></div><div class="text"><span>gummy bears</span></div></div><div class="box"><div class="image-wrap"><div class="image image-3"></div></div><div class="border"></div><div class="text"><span>sesame snaps</span></div></div><div class="box"><div class="image-wrap"><div class="image image-4"></div></div><div class="border"></div><div class="text"><span>chupa chups</span></div></div><div class="box"><div class="image-wrap"><div class="image image-5"></div></div><div class="border"></div><div class="text"><span>chocolate cookie</span></div></div><div class="box"><div class="image-wrap"><div class="image image-6"></div></div><div class="border"></div><div class="text"><span>cheescake muffin</span></div></div><div class="box"><div class="image-wrap"><div class="image image-7"></div></div><div class="border"></div><div class="text"><span>sweet toffee</span></div></div><div class="box"><div class="image-wrap"><div class="image image-8"></div></div><div class="border"></div><div class="text"><span>carrot cake</span></div></div><div class="box"><div class="image-wrap"><div class="image image-9"></div></div><div class="border"></div><div class="text"><span>lollipop</span></div></div><div class="box"><div class="image-wrap"><div class="image image-10"></div></div><div class="border"></div><div class="text"><span>macaroon</span></div></div><div class="box"><div class="image-wrap"><div class="image image-11"></div></div><div class="border"></div><div class="text"><span>lemon tart</span></div></div><script>// for storing mouse x / y positionvar mousePos = {x: -10,y: -10};// select the .box DOM elementsvar boxElements = document.getElementsByClassName('box');// create an array of objects to store the box elements and their image// positionsvar boxes = [];for (var i = 0; i < boxElements.length; i++) {boxes.push({el: boxElements[i],targetX: 0,targetY: 0,prevX: 0,prevY: 0,x: 0,y: 0,left: boxElements[i].offsetLeft,top: boxElements[i].offsetTop,size: boxElements[i].offsetWidth})}function mousemove(e) {// update mouse positionmousePos.x = e.pageX;mousePos.y = e.pageY;}function updateBox(box) {// check if mouse is in box areaif (mousePos.x > box.left && mousePos.x < (box.left + box.size) &&mousePos.y > box.top && mousePos.y < (box.top + box.size)) {// the mouse is in the space over the box - update the box image target position dependent on how far the mouse position is from the center of the box (box size/2)box.targetX = (box.size / 2 - (mousePos.x - box.left)) * 0.1;box.targetY = (box.size / 2 - (mousePos.y - box.top)) * 0.1;} else {// otherwise the box isn't being hovered, its target is 0box.targetX = 0;box.targetY = 0;}// update the image element position by lerping position to targetbox.x += (box.targetX - box.x) * 0.2;box.y += (box.targetY - box.y) * 0.2;// check that the values aren't really small already, to overcome javascripts poor handling of high precision mathif (Math.abs(box.x) < .001) box.x = 0;if (Math.abs(box.y) < .001) box.y = 0;// only update CSS if the position has changed since last loopif (box.prevX !== box.x && box.prevY !== box.y) {// update css of image elementbox.el.children[0].children[0].style.transform = 'translate3d(' + box.x + 'px, ' + box.y + 'px, 0)';}// update prev values for next comparisonbox.prevX = box.x;box.prevY = box.y;}function loop() {// in the loop - updated each of the boxesfor (var i = 0, l = boxes.length; i < l; i++) {updateBox(boxes[i]);}requestAnimationFrame(loop);}function resize() {// the box positions/sizes have updated on resize, so they need to be// resetfor (var i = 0; i < boxes.length; i++) {boxes[i].left = boxes[i].el.offsetLeft;boxes[i].top = boxes[i].el.offsetTop;boxes[i].size = boxes[i].el.offsetWidth;}}// attach the mouse event listener to the documentdocument.addEventListener('mousemove', mousemove);// listen for resize event, so box sizes can be updatedwindow.addEventListener('resize', resize);// run the animation looploop();</script>
</body>
</html>

html实现好看的照片墙相关推荐

好看的照片墙效果实现（RecyclerView+Cardview+Palette）
不废话直接看效果本图来源:Android5.x 新控件之RecyclerView,CardView,Palette的使用大家跟着上面链接中的内容就能实现上图的效果了,只需要把其中RecyclerV ...
Python “多爱你一点”照片墙
Python "520+1"的照片墙这篇文章是怎么来的呢,那就说来话长了,不过动机就是给喜欢的ta的.刚过520就拿出来分享一下.希望给在找如何给ta制造感动的你一下灵感吧! # ...
中国历史上的三次衣冠南渡
唐刘知几<史通·邑里>: "异哉,晋氏之有天下也!自雒阳荡覆,衣冠南渡,江左侨立州县,不存桑梓." 衣冠南渡,亦作衣冠南度.语出唐史学家刘知几<史通>&qu ...
【幻灯片动画制作教程】Focusky教程 | 图片与照片的排版秘籍
(Focusky动画演示大师简称为"FS软件")图片与照片的排版, 关系着整个演示文稿的质量.其实, 对于非专业的设计师来讲,仍然有简单的方法来做出高逼格的排版. 请看以下分享. ...
实战｜用 Python 轻松制作好看的心型照片墙
人生苦短,我用Python!今天分享如何用Python制作好看的心型照片墙. 一.效果我们先来看下效果图,了解我们接下来要做的事情,我的效果图如下: 感觉如何?如果还满意,看完幸苦点个赞,因为看完你 ...
心形图案怎么摆_心形照片墙怎么摆最好看
家里有多余的照片怎么办呢,收纳起来的话就起不到观赏,因为最好的方式就是将它做成照片墙,放在墙面上既能欣赏,又能起到装饰的作用,但是很多人关于照片墙怎么摆放不是很清楚,那么下面我们就为大家介绍一下心形照 ...
实战 | 用 Python 轻松制作好看的心型照片墙
人生苦短,我用Python!今天分享如何用Python制作好看的心型照片墙. 一.效果我们先来看下效果图,了解我们接下来要做的事情,我的效果图如下: 感觉如何?如果还满意,看完幸苦点个赞,因为看完你 ...
计算机教室布置软木,软木照片墙布置，让孩子体验手工的乐趣
知识导读:照片墙大家都知道,很多新婚家庭都会在房屋客厅比较显眼的地方留下婚姻最美好的一瞬间,也有一些老夫老妻了,则会在家留下全家福以及一些在青葱岁月印刻,不过这些仿佛都是大人们做的事,和小孩没关系,其 ...
超详细的纯CSS的照片墙特效
超详细的纯CSS的照片墙特效你好,欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效,然后在一个页面上放了多张就形成了一个照片墙,效果如下: 鼠标 ...

html实现好看的照片墙

照片可缩放可移动

效果：鼠标没进入之前的效果

鼠标悬浮在某一张图片之上

当鼠标移动时里面的图片也是可以移动的，如果你不想要这种效果，把js代码去掉就好了

html实现好看的照片墙相关推荐

最新文章

热门文章