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

使用 css 动画实现了一个当鼠标悬浮在图片上时放大展示的照片墙,效果图如下:
html + css 实现一个炫酷的照片墙_第1张图片
html + css 实现一个炫酷的照片墙_第2张图片

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


<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>

你可能感兴趣的:(前端开发学习笔记,html,css)