CSS图文消息的鼠标hover悬停特效
以下是一个简单的CSS实现的图文消息鼠标悬停特效的示例代码：
HTML:
<div class="message">
<div class="message-content">
<h3>消息标题</h3>
<p>这是一个图文消息的示例，当鼠标悬停时会有特效显示。</p>
</div>
</div>CSS:
.message {
width: 300px;
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
text-align: center;
transition: box-shadow 0.3s ease; /* 平滑过渡阴影效果 */
}
.message:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 鼠标悬停时显示阴影 */
}
.message-content h3 {
margin-top: 0;
color: #333;
}
.message-content p {
color: #666;
margin-bottom: 0;
}这段代码实现了一个简单的图文消息悬停特效。当鼠标悬停在.message元素上时，它会平滑变大并显示阴影。这个特效可以根据需求进行样式调整和复杂化，以实现更多的交互效果。
评论已关闭