中秋节祝福网页制作

weixin_57169969

已于 2022-08-30 19:44:19 修改

阅读量2.9k

点赞数 14

文章标签： html css 前端

于 2022-08-30 00:22:42 首次发布

本文链接：https://blog.csdn.net/weixin_57169969/article/details/126595145

版权

一：我的中秋

一提到中秋节大概就会想到赏月与吃月饼，每年都有五花八门的月饼，自己是又好奇又不敢尝试，随着中秋慢慢临近，想着用简单的页面来表达对大家的中秋祝福。

二：计划

用html加css实现鼠标悬浮后字体展开,插入一张兔子望月作为背景。

三：实体展示：

话不多说，上图：

四：具体代码

css:

body{
  	 margin:0;
    padding: 0;
   height: 100%;
    background-image: url(aaa.png);
    background-size: 100% ,100%;
    
}
.middle{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
}
.test{
    color: #B89E40;
    font-size: 70px;
    font-family: "montserrar";
    font-weight: 900;
    cursor:pointer;
}
.hidden{
    max-width: 0;
    opacity: 0;
    transition: 0.5s ease-in;

}
.test:hover .hidden{
    opacity: 1;
    max-width: 1em;
}
a{text-decoration:none;}

html：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="test middle" >
        <span class="hidden">兄</span>
        <span class="hidden">弟</span>
        <span class="hidden">们</span>
        <span class="hidden"><a href="">&nbsp; </a></span>
        <span >中</span>
        <span >秋</span>
        <span class="hidden">快</span>
        <span class="hidden">乐</span>

    </div>
</body>