HTML+CSS实现照片墙

谁借莪1个温暖的怀抱¢ 2023-10-03 13:59 76阅读 0赞

效果图如下

鼠标停留在图片上,会放大图片

在这里插入图片描述

图片

请添加图片描述

请添加图片描述
请添加图片描述
请添加图片描述
在这里插入图片描述
在这里插入图片描述

实现代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>照片墙</title>
  6. <style>
  7. body {
  8. background-color: #F5F5DC;
  9. }
  10. .box {
  11. margin: auto;
  12. width: 1000px;
  13. height: 600px;
  14. position: relative;
  15. }
  16. .box img {
  17. border: 1px solid white;
  18. padding: 10px;
  19. width: 300px;
  20. box-shadow: 1px 1px 5px #666;
  21. border-radius: 10px;
  22. transition: all 1s;
  23. }
  24. .box img:hover {
  25. transform: scale(1.5,1.5);
  26. z-index: 1;
  27. }
  28. .img1 {
  29. position: absolute;
  30. top: 181px;
  31. left: 300px;
  32. transform: rotate(45deg);
  33. }
  34. .img2 {
  35. position: absolute;
  36. top: 248px;
  37. left: 142px;
  38. transform: rotate(-25deg);
  39. }
  40. .img3 {
  41. position: absolute;
  42. top: 97px;
  43. left: 472px;
  44. transform: rotate(15deg);
  45. }
  46. .img4 {
  47. position: absolute;
  48. top: 280px;
  49. left: 531px;
  50. transform: rotate(-65deg);
  51. }
  52. .img5 {
  53. position: absolute;
  54. top: 133px;
  55. left: 93px;
  56. transform: rotate(40deg);
  57. }
  58. .img6 {
  59. position: absolute;
  60. top: 393px;
  61. left: 318px;
  62. transform: rotate(-30deg);
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <div class="box">
  68. <img src="images/11.jpg" class="img1">
  69. <img src="images/22.jpg" class="img2">
  70. <img src="images/33.jpg" class="img3">
  71. <img src="images/44.jpg" class="img4">
  72. <img src="images/55.jpg" class="img5">
  73. <img src="images/66.jpg" class="img6">
  74. </div>
  75. </body>
  76. </html>

注意调整自己的图片路径

  • 若与我的都一致就不需要修改

在这里插入图片描述
在这里插入图片描述

  • 不一致的调整一下图片路径(按照自己的路径进行调整)








发表评论

表情:
评论列表 (有 0 条评论,76人围观)

还没有评论,来说两句吧...

相关阅读

    相关 原生js实现3D照片

    聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了css代码,如果您觉得您的css写得不错,可以直接看js代码哦 效

    相关 CSS照片

    开发工具与关键技术:DW 作者:文泽钦 撰写时间:2019年1月31日 今天跟大家分享一个css照片墙,代码也很简单,能省略的效果也省略了,大家也不要学我,不然学校也

    相关 照片

    开发工具与关键技术:Adobe Dreamweaver CC 2017 CSS 作者:廖亚星 撰写时间:2019年2月15日 下面是让多张照片错乱分布在页面上,当移