开发工具与关键技术：VSCode HTML CSS
作者：尘则
撰写时间：2021/12/8
今天来说说过渡属性实现的菜单，先看效果：
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
要实现这一点，必须规定两项内容：
规定要把效果添加到哪个 CSS 属性上
规定效果的时长
代码给到各位，供各位参考。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.nav{
position: fixed;
top: 200px;
right: 30px;
width:30px;
height: 86px;
}
ul{
list-style:none;
}
.nav ul li{
float: left;
position: relative;
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.nav ul li .yangshi{
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 12px;
color:#fff;
text-align: center;
background:#141313;
transition: width 0.3s;
overflow: hidden;
}
.nav img{
float:right;
}
.nav a:hover .yangshi{
width:100px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<div class="yangshi">
<img src="1.jpg" alt="" width="30" height="30">
联系我们
</div>
</a>
</li>
<li>
<a href="#">
<div class="yangshi">
<img src="2.jpg" alt="" width="30" height="30">
传颂之物
</div>
</a>
</li>
<li>
<a href="#">
<div class="yangshi">
<img src="3.gif" alt="" width="30" height="30">
法律法规
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
这些是我所得到的过渡属性实现的菜单，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享。🚨注意！本文章仅供参考，请勿抄袭！望理解.
如果有更好的方法欢迎在评论区教导和提问喔！
扫一扫
3394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
