如果 %需求描述 制作如图9.5和图9.6所示的创意导航,要求如下。设置整个页面背景为粉色,字体类型为微软雅黑。 导航内容使用display属性使其排列在一行,并使用margin属性使其居中显示。 导航默认字体颜色为#AAA,当鼠标指针滑过导航时,改变字体颜色为#FFF,字体转换效果为睫转5°,放大11倍,并且在字体的前后加入一条宽度为20px、颜色为#FFF的lpe的实线。 23
时间: 2024-04-02 14:31:50 浏览: 190
以下是一个简单的示例实现:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创意导航</title>
<style>
body {
background-color: pink;
font-family: "微软雅黑", sans-serif;
}
nav {
display: flex;
justify-content: center;
margin-top: 50px;
}
nav a {
color: #aaa;
font-size: 24px;
margin: 0 20px;
text-decoration: none;
position: relative;
}
nav a::before,
nav a::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background-color: #fff;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s ease;
}
nav a::before {
left: -40px;
}
nav a::after {
right: -40px;
}
nav a:hover {
color: #fff;
transform: rotate(5deg) scale(11);
}
nav a:hover::before,
nav a:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
```
效果如下图所示:
![创意导航效果图](https://i.imgur.com/3iX6eYO.png)
阅读全文