html + css 实现一个炫酷的照片墙

最新推荐文章于 2024-05-15 12:09:52 发布

疯魔coding君

最新推荐文章于 2024-05-15 12:09:52 发布

阅读量9.7k

点赞数 30

分类专栏：前端开发学习笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_44214671/article/details/111398204

版权

前端开发学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

使用 css 动画实现了一个当鼠标悬浮在图片上时放大展示的照片墙，效果图如下：
在这里插入图片描述

以下直接附上源码，图片可自己随意设置，所有图片放在与源码 .html 文件同级的 img2 文件夹内：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style>
        body {
            background-color: #F5F5DC;
        }
        .box  {
            margin: auto;
            width: 1000px;
            height: 600px;
            position: relative;
        }
        .box img {
            border: 1px solid white;
            padding: 10px;
            width: 300px;
            box-shadow: 1px 1px 5px #666;
            border-radius: 10px;
            transition: all 1s;
        }
        .box img:hover {
            transform: scale(1.5,1.5);
            z-index: 1;
        }
        .img1 {
            position: absolute;
            top: 181px;
            left: 300px;
            transform: rotate(45deg);
        }
        .img2 {
            position: absolute;
            top: 248px;
            left: 142px;
            transform: rotate(-25deg);
        }
        .img3 {
            position: absolute;
            top: 97px;
            left: 472px;
            transform: rotate(15deg);
        }
        .img4 {
            position: absolute;
            top: 280px;
            left: 531px;
            transform: rotate(-65deg);
        }
        .img5 {
            position: absolute;
            top: 133px;
            left: 93px;
            transform: rotate(40deg);
        }
        .img6 {
            position: absolute;
            top: 393px;
            left: 318px;
            transform: rotate(-30deg);
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img2/111.jpg" class="img1">
    <img src="img2/222.jpg" class="img2">
    <img src="img2/333.jpg" class="img3">
    <img src="img2/444.jpg" class="img4">
    <img src="img2/555.jpg" class="img5">
    <img src="img2/666.jpg" class="img6">
</div>
</body>
</html>

疯魔coding君

关注

30
点赞
踩
146

收藏

觉得还不错? 一键收藏
12
评论
html + css 实现一个炫酷的照片墙

使用 css 动画实现了一个当鼠标悬浮在图片上时放大展示的效果，效果图如下：以下直接附上源码，图片可自己随意设置，所有图片放在与源码 .html 文件同级的 img2 文件夹内：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>照片墙</title> <style> body {
复制链接

扫一扫