第236练最终效果如下：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><link rel=”stylesheet” href=”index.css” /><title>第236练</title></head><body><nav class=”active” id=”nav”><ul><li><a href=”#”>主页</a></li><li><a href=”#”>服务</a></li><li><a href=”#”>关于</a></li><li><a href=”#”>联系我们</a></li></ul><button class=”icon” id=”toggle”><div class=”line line1″></div><div class=”line line2″></div></button></nav><script src=”index.js”></script></body></html>
CSS:
@import url(‘https://fonts.googleapis.com/css?family=Muli&display=swap’);* {box-sizing: border-box;}body {background-color: #eafbff;background-image: linear-gradient(to bottom,#eafbff 0%,#eafbff 50%,#5290f9 50%,#5290f9 100%);font-family: ‘Muli’, sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;margin: 0;}nav {background-color: #fff;padding: 20px;width: 80px;display: flex;align-items: center;justify-content: center;border-radius: 3px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);transition: width 0.6s linear;overflow-x: hidden;}nav.active {width: 350px;}nav ul {display: flex;list-style-type: none;padding: 0;margin: 0;width: 0;transition: width 0.6s linear;}nav.active ul {width: 100%;}nav ul li {transform: rotateY(0deg);opacity: 0;transition: transform 0.6s linear, opacity 0.6s linear;}nav.active ul li {opacity: 1;transform: rotateY(360deg);}nav ul a {position: relative;color: #000;text-decoration: none;margin: 0 10px;}.icon {background-color: #fff;border: 0;cursor: pointer;padding: 0;position: relative;height: 30px;width: 30px;}.icon:focus {outline: 0;}.icon .line {background-color: #5290f9;height: 2px;width: 20px;position: absolute;top: 10px;left: 5px;transition: transform 0.6s linear;}.icon .line2 {top: auto;bottom: 10px;}nav.active .icon .line1 {transform: rotate(-765deg) translateY(5.5px);}nav.active .icon .line2 {transform: rotate(765deg) translateY(-5.5px);}
JS:
const toggle = document.getElementById(‘toggle’)const nav = document.getElementById(‘nav’)toggle.addEventListener(‘click’, () => nav.classList.toggle(‘active’))
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
