实验目的：1. 熟悉CSS3 transition动画过程
2. 熟悉CSS3 阴影效果的使用
实验要求：利用CSS3动画技术制作响应式放大悬浮菜单，具体要求：
1.在网页中添加多个菜单，菜单文字内容自定；
2.在用户鼠标悬浮至菜单上方后，菜单动画放大；
3.放大后的菜单添加阴影使其悬浮于页面之上，具有立体感。
代码展示:
css:
/ 基础样式 /
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #eae2d5;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
nav {
display: flex;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 5px;
padding: 20px 10px;
flex-direction: row;
justify-content: space-around;
}
.menu {
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
.menu li {
position: relative;
margin-right: 15px;
padding: 0 20px;
}
.menu li a {
background-color: #f0ebe6;
box-shadow: -3px -3px 6px #ffffff, 5px 5px 5px rgba(0, 0, 0, 0.5);
/* 阴影效果 */
border-radius: 5px;
text-align: center;
width: 100px;
color: #000000;
display: block;
text-decoration: none;
font-size: 25px;
transition: all 0.5s ease-in-out;
/* 动画过渡效果 */
}
/ 鼠标悬浮放大效果 /
.menu li a:hover {
transform: scale(1.1);
/ 放大效果 /
box-shadow: -3px -3px 6px #ffffff, 10px 10px 20px rgba(0, 0, 0, 0.5);
/ 阴影效果 /
border-radius: 5px;
}
html：
<!DOCTYPE html>
