html实现好看的照片墙

最新推荐文章于 2024-06-11 00:31:00 发布
最新推荐文章于 2024-06-11 00:31:00 发布
阅读量6.5k 收藏 61
点赞数 4
文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nihaio25/article/details/120448186
版权

照片可缩放可移动

效果：鼠标没进入之前的效果
鼠标悬浮在某一张图片之上
当鼠标移动时里面的图片也是可以移动的，如果你不想要这种效果，把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 position
    var mousePos = {
      x: -10,
      y: -10
    };

    // select the .box DOM elements
    var boxElements = document.getElementsByClassName('box');

    // create an array of objects to store the box elements and their image
    // positions
    var 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 position
      mousePos.x = e.pageX;
      mousePos.y = e.pageY;
    }

    function updateBox(box) {
      // check if mouse is in box area
      if (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 0
        box.targetX = 0;
        box.targetY = 0;
      }

      // update the image element position by lerping position to target
      box.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 math
      if (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 loop
      if (box.prevX !== box.x && box.prevY !== box.y) {
        // update css of image element
        box.el.children[0].children[0].style.transform = 'translate3d(' + box.x + 'px, ' + box.y + 'px, 0)';
      }
      // update prev values for next comparison
      box.prevX = box.x;
      box.prevY = box.y;
    }
    function loop() {
      // in the loop - updated each of the boxes
      for (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
      // reset
      for (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 document
    document.addEventListener('mousemove', mousemove);
    // listen for resize event, so box sizes can be updated
    window.addEventListener('resize', resize);
    // run the animation loop
    loop();
  </script>
</body>
</html>
小白6402
关注
  • 4
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【HTML 实现 —— 爱心照片墙】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-15 6101
效果 这是初步时的照片组成的爱心模样： 这是我们把照片换成好看小姐姐之后的模样： 代码 index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Html-照片墙</title> <link href="css/style.css" type="text/css" rel="styl
html实现照片墙 html实现照片墙
02-22
html实现照片墙
【源码+文档】基于HTML+CSS实现可交互照片墙
yuxibdd的博客
09-11 1183
根据需求，设计界面原型。
网页设计——动态照片墙效果
最新发布
m0_59033716的博客
06-11 456
<img src="img/1.jpg" alt="大海的夜空"/></a></li><li><a href="#" title="海边的黄昏"><img src="img/3.jpg" alt="海边的黄昏"/></a></li><li><a href="#" title="完美的星空"><img src="img/4.jpg" alt="完美的星空"/>动态照片墙效果
用HTML做一個酷炫的照片墻，效果非常酷炫。
weqireirtotor的博客
11-24 2784
這就是全部代碼，怎麽弄照片呢？新建文件夾，命名爲照片墻，再在裏面建一個文件夾命名爲img，在文件夾裏面下載好30張美照，命名爲1.jpg，2.jpg......
html 照片墙
热门推荐
杨杨杨~~的博客
11-20 2万+
html 照片墙 代码很简单，首先准备一些照片放入一个文件夹。 之后上代码，难度不大，可以直接复制粘贴使用: html文件: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &l...
html+js做一个照片墙，有四种样子。
weqireirtotor的博客
12-27 2703
先看看效果 效果不错吧！以下是代码（需要完整代码自行提取）HTML主体： css样式 完整版源码链接：链接：https://pan.baidu.com/s/12NaEczVqSUXBMIaUvwhFzw?pwd=b878 提取码：b878
最火照片墙前端纯HTML（只需添加照片）
孙宇航的博客
05-19 1万+
最火照片墙
HTML爱心照片墙.rar
01-15
这个"HTML爱心照片墙.rar"压缩包包含了实现这一特效的全部源代码和图片素材，使得用户能够直接运行并看到效果。在描述中提到了博客展示，这可能是指博主已经在线上演示了该效果，方便下载者了解其实际运行情况。 1....
基于HTML+CSS实现的可交互照片墙Web页面.zip
06-21
本次实验目为练习 HTML+CSS 的布局与样式，以及简单的交互，制作一个可交互的照片墙，照片墙可以点击照片查看大图 照片墙是一个可以将照片按照一定的顺序排列的 Web 页面，基本要求是照片要合理的地排布在页面上，且...
照片墙_HTML5制作照片墙_
09-29
本项目就是基于HTML5技术实现的一个照片墙示例，旨在为开发者提供一个参考模板，帮助他们理解和应用HTML5的相关特性。 【描述】：“这是一个利用HTML5制作的照片墙，用于参考，希望对大家有用” 这个项目的核心是...
HTML5照片墙
03-18
HTML5 照片墙 代码 一看就会 需要的可以下载
js实现3D照片墙效果
10-16
本文主要讲解如何使用JavaScript实现一个3D照片墙的效果。这个效果涉及到前端开发中的CSS3和JavaScript技术，具体包括以下知识点： 1. **CSS3 3D变换**： - `transform`属性用于改变元素的位置、大小或形状。在3D...
HTML照片墙
qq_47044642的博客
01-12 772
照片墙主要代码 <style type="text/css"> body{ background: url(image/bg.jpg); } #gallery{ margin: 100px auto; padding: 40px; list-style: none; width: 1000px; } #gallery li{ float: left; width: 300px; overflo
html+css实现一个会旋转且变大的静态照片墙
qq_57560289的博客
07-22 2863
html+css实现一个会旋转且变大的静态照片墙
HTML实现3D照片旋转墙
gs1we1的博客
04-21 6332
html
html+css实现3D相册
qq_44421796的博客
10-17 1488
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>3D旋转</title> <style type="text/css"> *{padding: 0; margin: 0;} body,html{height:100%;} /* 背景图片在这里设置
怎样用html+css制作照片墙？
qq_39875553的博客
08-18 4028
照片墙 @charset "utf-8"; body { background:gainsboro;/*背景颜色*/ } .div_pic { width:800px; height:1000px; margin:60px auto; position:relative; } .p { /*内边距*/ padding:10px 10px 10px;
html5立体照片墙效果,HTML5特效可以 14种jQuery超酷3D网格照片墙动画特效源码
weixin_32676541的博客
06-03 2672
效果图各位长友大家好，今天 给大家带来的是14种jQuery超酷3D网格照片墙动画特效源码！大家可以按照自己的意愿做成 个人喜欢的样子！想要文件版源码的，请加穷581549454废话不多说。上源码！CSS源码：@importurl(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face {font-family: ...
html5 纯css 实现照片墙
01-15
HTML5是一种用于网页设计和展示的标准语言，而CSS则是用来控制网页样式和布局的语言。要实现照片墙，首先需要使用HTML5设置图片的容器，然后利用CSS来实现图片的布局和样式。 在HTML5中，可以使用<div>标签来创建图片的容器，并设置相应的class和id属性。然后在CSS中，利用class和id选择器来控制图片的大小、间距和排列方式。通过设置不同的样式属性，比如float、position、width、height等，可以让图片在照片墙中按照设定的规则进行排列和展示。 此外，还可以利用CSS3的一些新特性来增加照片墙的美观度，比如使用过渡效果让图片在鼠标悬停时产生动画效果，或者使用阴影和圆角来美化图片的边缘。另外，还可以使用媒体查询来实现响应式布局，使照片墙能够在不同设备上都能良好地展示。 总之，要实现照片墙只需要使用HTML5和纯CSS就可以轻松完成。通过合理地设置容器和样式，可以让照片墙呈现出美观且有序的效果。这种方法不仅简洁高效，而且能够保证在不同浏览器和设备上都有良好的展示效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值