HTML+CSS实现简易可交互照片墙

最新推荐文章于 2025-06-05 17:26:46 发布

原创

最新推荐文章于 2025-06-05 17:26:46 发布 · 3.2k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何使用HTML和CSS实现一个简易的可交互照片墙。当鼠标悬停在图片上时，图片会旋转并放大，提供动态的用户体验。通过替换HTML中的图片地址，你可以轻松定制自己的照片墙。

效果图

首先先把效果图摆上

在这里插入图片描述

功能

可以进行动态交互，当鼠标放到图片上时，图片会旋转放大。

代码

首选，要实现一个简易的可交互的照片墙，我们需要先找到合适的图片，然后就是利用代码实现了。

HTML代码：
使用时，只需要将图片地址换成自己的本地地址即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Wall</title>
    <link type="text/css" rel="stylesheet" href="./style2.css">

</head>
<body >
<div class="container">
    <img class="pic pic1" src="img/1.jpg">
    <img class="pic pic2" src="img/2.jpg">
    <img class="pic pic3" src="img/3.jpg">
    <img class="pic pic4" src="img/4.jpg">
    <img class="pic5 pic" src="img/5.jpg">
    <img class="pic6 pic" src="img/6.jpg">
    <img class="pic7 pic" src="img/7.jpg">
    <img class="pic8 pic" src="img/8.jpg">
    <img class="pic9 pic" src="img/9.jpg">
    <img class="pic10 pic" src="img/10.jpg">
</div>

<div class="container">
    <img class="pic11 pic" src