📅 最后修改于: 2023-12-03 15:12:53.314000 🧑 作者: Mango
在网页设计中，下拉菜单常常用于网站导航、筛选等功能场景。为了增加交互体验，可以为下拉菜单添加颤动效果，使菜单项在鼠标悬停时产生微小的颤动，增加用户的视觉反馈。
下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>颤动下拉菜单背景颜色</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 4px;
animation: shake .8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.dropdown:hover .dropdown-content {
display: block;
}
@keyframes shake {
0% { background-color: #f1f1f1; }
25% { background-color: #d1d1d1; }
50% { background-color: #e1e1e1; }
75% { background-color: #c1c1c1; }
100% { background-color: #f1f1f1; }
}
</style>
</head>
<body>
<div class="dropdown">
<button>下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜单项1</a>
<a href="#">菜单项2</a>
<a href="#">菜单项3</a>
</div>
</div>
</body>
</html>
此代码使用 CSS3 动画特性实现颤动效果，逐帧改变菜单背景颜色，通过伪随机的动态变化，产生视觉震动的效果。同时只在鼠标悬停时触发颤动动画，避免了页面过度动态化带来的视觉干扰。
请注意，CSS3 动画不兼容老旧的浏览器，建议在使用时做出兼容性处理。
# 颤动下拉菜单背景颜色介绍
在网页设计中，下拉菜单常常用于网站导航、筛选等功能场景。为了增加交互体验，可以为下拉菜单添加颤动效果，使菜单项在鼠标悬停时产生微小的颤动，增加用户的视觉反馈。
下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>颤动下拉菜单背景颜色</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 4px;
animation: shake .8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.dropdown:hover .dropdown-content {
display: block;
}
@keyframes shake {
0% { background-color: #f1f1f1; }
25% { background-color: #d1d1d1; }
50% { background-color: #e1e1e1; }
75% { background-color: #c1c1c1; }
100% { background-color: #f1f1f1; }
}
</style>
</head>
<body>
<div class="dropdown">
<button>下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜单项1</a>
<a href="#">菜单项2</a>
<a href="#">菜单项3</a>
</div>
</div>
</body>
</html>
此代码使用 CSS3 动画特性实现颤动效果，逐帧改变菜单背景颜色，通过伪随机的动态变化，产生视觉震动的效果。同时只在鼠标悬停时触发颤动动画，避免了页面过度动态化带来的视觉干扰。
请注意，CSS3 动画不兼容老旧的浏览器，建议在使用时做出兼容性处理。