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

Jupiter！

于 2020-04-03 00:43:55 发布

阅读量2.9k

点赞数 4

分类专栏： Web开发

本文链接：https://blog.csdn.net/never_say_never7/article/details/105283522

版权

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

摘要由CSDN通过智能技术生成

效果图

首先先把效果图摆上

在这里插入图片描述

功能

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

代码

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

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=