css3 制作手机常见的右上角响应式的折叠菜单效果

最新推荐文章于 2023-12-26 10:37:54 发布

原创最新推荐文章于 2023-12-26 10:37:54 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用纯CSS3实现的菜单动画效果，通过:hover伪类触发菜单项的旋转和阴影变化，适用于网页导航栏的设计。代码简洁，易于理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box { margin: 200px; border: 1px solid red;}
.menu { width: 100px; height: 100px; position: relative; }
.menu:before, .menu:after { content: ""; display: block; width: 100px; height: 16px; background: #000; border-radius: 10px; position: absolute; left: 0; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.menu:before { top: 5px; box-shadow: 0 37px #000; }
.menu:after { bottom: 5px; }
.menu:hover:before { top: 42px; box-shadow: none; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.menu:hover:after { bottom: 42px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
</style>
</head>
<body>
<div class="box">
<div class="menu">

</div>
</div>
</body>

</html>

拿走不谢内容还有有些有价值的