一：我的中秋
一提到中秋节大概就会想到赏月与吃月饼，每年都有五花八门的月饼，自己是又好奇又不敢尝试，随着中秋慢慢临近，想着用简单的页面来表达对大家的中秋祝福。
二：计划
用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=""> </a></span>
<span >中</span>
<span >秋</span>
<span class="hidden">快</span>
<span class="hidden">乐</span>
</div>
</body>
实现思路：
html：
我们建一个div 里面用span去显示我们想要说的话.
字体我们全部使用span标签一个标签扩一个字，为所有的字加上hidden实现隐藏，把我们这次的主体也就是中秋不加我们定义的hidden。
css:
背景我们直接在body加一个图片作为背景，这里选一个兔子望月的图片。
middle:设置一下盒子的位置，布局和定位方式 transform:translateY(-50%)使盒子保持在竖直中间的位置。
test:完成对文本的设置
hidden:opacity 设置能见度为0,tradsition设置过度动画以及时间
在css中hover用于选择鼠标指针浮动在上面的元素，也就是变化后的样式，我们把原本的能见度opacity：0调到1
五：心路历程：
说实话本来打算画俩小时写一个流动字符的网页或者滚轮滑动实现目标字体显现的网页，我是真没想到好久没写前端会生疏成这样，这个谷歌为什么transition这个设置好多不能使用，实现除字体扣除其他的设置也实现不了，我真的哭了wuwuwu~~~,最后做了个简单的鼠标悬浮实现字体展开。
最后，也祝大家中秋节快乐~
本文转载自: https://blog.csdn.net/weixin_57169969/article/details/126595145
版权归原作者 天海奈奈 所有， 如有侵权，请联系我们删除。
版权归原作者 天海奈奈 所有， 如有侵权，请联系我们删除。