【每日一练】86—一个动画菜单效果的实现果
web前端开发
共 7621字，需浏览 16分钟
· 2022-10-23
今天练习的这个效果，也是非常常见的一个效果，你也会在很多产品中看到它，算是一个比较实用型的小练习，现在，我们一起来看一下它的最终 效果：
<html>
<head>
<title>【每日一练】86—一个动画菜单效果的实现</title>
<!--ICON文件引入-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js">
</script>
<!--CSS文件引入-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navigation">
<div class="menuToggle"></div>
<div class="menu">
<ul>
<li style="--i:0.1s;"><a href="https://www.webqdkf.com/"><ion-icon name="camera-outline"></ion-icon></a></li>
<li style="--i:0.2s;"><a href="https://www.webqdkf.com/"><ion-icon name="settings-outline"></ion-icon></a></li>
<li style="--i:0.3s;"><a href="https://www.webqdkf.com/"><ion-icon name="trash-outline"></ion-icon></a></li>
</ul>
</div>
</div>
<script>
let menuToggle = document.querySelector('.menuToggle');
menuToggle.onclick = function(){
menuToggle.classList.toggle('active')
}
</script>
</body>
</html>
CSS代码：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg,#ff216d,#2196f3);
}
.navigation
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.menuToggle
{
position: relative;
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.menuToggle::before
{
content: '+';
position: absolute;
font-size: 3em;
font-weight: 200;
color: #e91e63;
transition: 1.5s;
}
.menuToggle.active::before
{
transform: rotate(225deg);
}
.menu
{
position: absolute;
width: 30px;
height: 30px;
background: #fff;
border-radius: 70px;
z-index: -1;
transition: transform 0.5s, width 0.5s, height 0.5s;
transition-delay: 1s, 0.5s, 0.5s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.menuToggle.active ~ .menu
{
transform: translateY(-100px);
height: 70px;
width: 240px;
z-index: 1;
transition-delay: 0s, 0.5s, 0.5s;
box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}
.menuToggle ~ .menu::before
{
content: '';
position: absolute;
left: calc(50% - 8px);
bottom: 4px;
width: 16px;
height: 16px;
transform: rotate(45deg);
background: #fff;
border-radius: 2px;
transition: 0.5s;
}
.menuToggle.active ~ .menu::before
{
transition-delay: 0.5s;
bottom: -6px;
}
.menu ul
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
gap: 40px;
z-index: 10;
}
.menu ul li
{
list-style: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(-30px);
transition: 0.25s;
transition-delay: 0s;
transition-delay: calc(0s + var(--i));
}
.menuToggle.active ~ .menu ul li
{
visibility: visible;
opacity: 1;
transform: translateY(0px);
transition-delay: calc(0.75s + var(--i));
}
.menu ul li a
{
display: block;
font-size: 2em;
text-decoration: none;
color: #555;
}
.menu ul li:hover a
{
color: #e91e63;
}
写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论
多人同时导出 Excel 干崩服务器！新来的阿里大佬给出的解决方案太优雅了！
点击关注公众号，Java 干货及时推送↓推荐阅读：面试辅导，我们出大成果了！来源：juejin.cn/post/7259249904777838629前言 业务诉求：考虑到数据库数据日渐增多，导出会有全量数据的导出，多人同时导出可以会对服务性能造成影响，导出涉及到mysql查询的io操作，
Java技术栈
1
有意思！一个关于 Spring 历史的在线小游戏
发现 Spring One 的官网上有个好玩的彩蛋，分享给大家！进到Spring One的官网，可以看到右下角有个类似马里奥游戏中的金币图标。点击该金币之后，会打开一个新的页面，进入下面这样一个名为：The History Of Spring 的在线小游戏你可以使用上下左右的方向键来控制Spring
公众号程序猿DD
1
了解加密货币到加密货币的互换
1、什么是加密货币互换？加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同，加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
李彦宏：开源大模型不如闭源，后者会持续领先；周鸿祎：“开源不如闭源” 的言论是胡说八道
架构师大咖
架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。
公众号该公众号已被封禁0、李彦宏：开源大模型不如闭源，后者会持续领先当今
源码共读
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说，如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列，想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口，带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
【第129期】程序员的新宠：三款终端工具，让你告别Xshell！
概述 WindTerm：跨平台的SSH利器 首先介绍的是WindTerm，这是一款使用C语言开发的跨平台SSH客户端。它不仅完全免费，而且没有商业使用的限制。WindTerm支持SSH v2、Telnet、Raw Tcp等协议，而且性能出色，甚至超过了FinalShell和Electerm。功能
前端微服务
0
字节员工：35岁以后被裁员的，后来都走了哪条路？现在2-2，要不要利用最后一年拼命上个岸。
架构师大咖
架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。
公众号该公众号已被封禁在当今竞争激烈的职场环境中，年龄并不总是一个决定性
源码共读
0
顶级 Javaer 都在用的 20 个类库，真香！
点击关注公众号，Java 干货及时推送↓推荐阅读：投了 100 多份简历后…优秀且经验丰富的Java开发人员的特征之一是对API的广泛了解，包括JDK和第三方库。我花了很多时间来学习API，尤其是在阅读了Effective Java 3rd Edition之后 ，Joshua Bloch建
Java技术栈
1