html+css 实现hover中间展开背景
要实现一个hover时中间部分展开的背景效果，可以使用CSS中的线性渐变和关键帧动画。以下是一个简单的例子：
HTML:
<div class="container">
<div class="content">Hover over me!</div>
</div>CSS:
.container {
width: 200px;
height: 100px;
background: linear-gradient(to right, transparent 50%, #333 50%);
background-size: 100% 200%;
transition: background-position 0.5s ease;
}
.container:hover {
background-position: 0 100%;
}
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}这段代码中，.container 是一个具有中间渐变的容器，它的背景从左到右是透明和黑色。通过改变 background-position 的值，可以在hover时将背景的位置向下移动，从而展示出中间部分的效果。
评论已关闭