使用HTML5 + CSS制作一个照片墙是不难的，在大学里可以当作业交了，这是效果：

 这个是有动画的，具体的效果在这个网站的home页，Welcome的源码参考了用html做一个漂亮的网站，个人网页，css_梅干菜个小酥饼的博客-CSDN博客_好看的html网页http://www.sunruiyang.xyz/icon-default.png?t=M0H8http://www.sunruiyang.xyz/

HTML代码，这里为了方便修改动画的角度样式背景等，内联了一部分的CSS：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">


    <style type="text/css">
        body {
            background-color: MediumAquaMarine;
            background-size: 100%;
        }
        img {
            width: 350px;
        }
        #pic1 {
            position: absolute;
            top: 90px;
            left: 10px;
            transform: rotate(20deg);
        }
        #pic2 {
            position: absolute;
            top: 90px;
            left: 300px;
            transform: rotate(20deg);
        }
        #pic3 {
            position: absolute;
            top: 90px;
            left: 650px;
            transform: rotate(20deg);
        }
        #pic4 {
            position: absolute;
            top: 90px;
            left: 900px;
            transform: rotate(20deg);
        }
        #pic1:hover {
            transform: rotate(0deg);
            transform: scale(1.5);
        }
        #pic2:hover {
            transform: rotate(0deg);
            transform: scale(1.5);
        }
        #pic3:hover {
            transform: rotate(0deg);
            transform: scale(1.5);
        }
        #pic4:hover {
            transform: rotate(0deg);
            transform: scale(1.5);
        }

        /*在这里开始编写【设置图片样式】的代码*/
    </style>
</head>


<body>
    <h1>名画展览墙</h1>
    <p id="part1">一起来欣赏艺术的美！</p>
    <div>
        <!--在这里开始编写【添加 id 属性】的代码-->
        <img id="pic1" src="呐喊.jpg" />
        <img id="pic2" src="戴珍珠耳环的少女.jpg" />
        <img id="pic3" src="星夜.jpg" />
        <img id="pic4" src="蒙娜丽莎.jpg" />
    </div>
    <div class="ribbon">
                <a href='index.html'><span>Welcome</span></a>
                <a href='home.html'><span>Home</span></a>
    </div>

    <div class="content">
        <hr/>
        <p>站长注释:<br>部分功能仍在开发中，详情咨询QQ：3148420460</p>
    </div>

</body>

</html>

CSS：


@import url('https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao|Long+Cang|Ma+Shan+Zheng|ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei&display=swap&subset=chinese-simplified');

/* 设置背景样式 */
body {
  background: no-repeat;
  background-size: cover;
}
/* 设置标题样式 */
h1 {
  height: 80px;
  color:rgba(255, 248 , 220);
  font-size: 60px;
  font-family: 'Ma Shan Zheng';
  text-align: center;
}
/* 设置 */
#part1 {
  width: 70%;
  margin: 0px 15%;
  height:50px;
  font-family: 'Ma Shan Zheng';
  font-size: 36px;
  text-align: center;

  /* 添加字体颜色 */
  color:rgba(255,248,220);
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  border-width: 3px;
  border-style: solid;
  border-radius: 35px;
}

div img {
  box-shadow: 5px 5px 15px rgba(105,105,105,0.9);
  border-width: 10px 12px ;
  border-color: rgba(255,248,220, 0.9);
  border-style: solid;
  transition: all 0.5s ease-in;
  z-index: 10;
}

div {
  width: 1200px;
  height: 500px;
  margin: 80px auto;
  /* align: center; */
  position: relative;
}

img:hover{
  z-index: 100;
}
.ribbon {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 450px;
    top: 35px;
    margin: auto;
}



.ribbon a:link,
.ribbon a:visited {
    color: #000;
    text-decoration: none;
    height: 3.5em;
    overflow: hidden;
}

.ribbon span {
    background: #E6E6FA;
    display: inline-block;
    line-height: 3em;
    padding: 0 1.5em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s;
    /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;
    /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;
    /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;
    /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
    background: #FFD204;
    margin-top: 0;
}

.ribbon span:before {
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}
.content {
    position: absolute;
    top: 900px;
    left: 20px
}

 

# css # html5 # 网络
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟