【50天50个项目】旋转导航页面

实现效果:
在这里插入图片描述
在这里插入图片描述
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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /><link rel="stylesheet" href="style.css" /><title>Rotating Navigation</title></head><body><div class="container"><div class="circle-container"><div class="circle"><button id="close"><i class="fas fa-times"></i></button><button id="open"><i class="fas fa-bars"></i></button></div></div><div class="content"><h1>Amazing Article</h1><small>Florin Pop</small><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p><h3>My Dog</h3><img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" /><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p></div></div><nav><ul><li><i class="fas fa-home"></i><a href="#"> Home</a></li><li><i class="fas fa-user-alt"></i><a href="#"> About</a></li><li><i class="fas fa-envelope"></i><a href="#"> Contact</a></li></ul></nav><script src="script.js"></script></body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');* {box-sizing: border-box;
}body {font-family: 'Lato', sans-serif;background-color: #333;color: #222;overflow-x: hidden;margin: 0;
}.container {background-color: #fafafa;transform-origin: top left;transition: transform 0.5s linear;width: 100vw;min-height: 100vh;padding: 50px;
}.container.show-nav {transform: rotate(-20deg);
}.circle-container {position: fixed;top: -100px;left: -100px;
}.circle {background-color: #ff7979;height: 200px;width: 200px;border-radius: 50%;position: relative;transition: transform 0.5s linear;
}.container.show-nav .circle {transform: rotate(-70deg);
}.circle button {cursor: pointer;position: absolute;top: 50%;left: 50%;height: 100px;background: transparent;border: 0;font-size: 26px;color: #fff;
}.circle button:focus {outline: none;
}.circle button#open {left: 60%;
}.circle button#close {top: 60%;transform: rotate(90deg);transform-origin: top left;
}.container.show-nav + nav li {transform: translateX(0);transition-delay: 0.3s;
}nav {position: fixed;bottom: 40px;left: 0;z-index: 100;
}nav ul {list-style-type: none;padding-left: 30px;
}nav ul li {text-transform: uppercase;color: #fff;margin: 40px 0;transform: translateX(-100%);transition: transform 0.4s ease-in;
}nav ul li i {font-size: 20px;margin-right: 10px;
}nav ul li + li {margin-left: 15px;transform: translateX(-150%);
}nav ul li + li + li {margin-left: 30px;transform: translateX(-200%);
}nav a{color: #fafafa;text-decoration: none;transition: all 0.5s;
}nav a:hover {color: #FF7979;font-weight: bold;
}.content img {max-width: 100%;
}.content {max-width: 1000px;margin: 50px auto;
}.content h1 {margin: 0;
}.content small {color: #555;font-style: italic;
}.content p {color: #333;line-height: 1.5;
}

JS

const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')open.addEventListener('click', () => container.classList.add('show-nav'))close.addEventListener('click', () => container.classList.remove('show-nav'))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/736432.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

asp飞机订票-57-(说明+代码)

演示查看 http://pc.3q2008.Com/3q2008_Com/hkdp 目 录 1&#xff0e; 系统规划 3 1&#xff0e;1 行业背景 3 1&#xff0e;2 行业现状 3 1.2.1用户注册 3 1.2.2航班查询 3 1.2.3在线订票 3 1.2.4在线支付 3 1.2.5电子客票 4 1.2.6其它辅助产品与服务 4 1&#xff0e;3 需求…

[Mac软件]Adobe Illustrator 2024 28.3 intel/M1/M2/M3矢量图制作软件

应用介绍 Adobe Illustrator 是行业标准的矢量图形应用程序&#xff0c;可以为印刷、网络、视频和移动设备创建logos、图标、绘图、排版和插图。数以百万计的设计师和艺术家使用Illustrator CC创作&#xff0c;从网页图标和产品包装到书籍插图和广告牌。 绘制任意大小的标志 拥…

Timus#1005

C【动态规划】 #include<iostream> #include<vector> using namespace std; int main() {int n;cin >> n;vector<int> dp(100000 * 20);vector<int> a(n);int ans 0, cur 0;for (int i 0; i < n; i){cin >> a[i];ans a[i];}int sum…

C++ 求不同数组的最大值

编写一个名为max()的函数&#xff0c;用于求包含n个元素的数组的最大值&#xff0c;要求通过函数重载能求int、double、char、string的最大值。 函数接口定义&#xff1a; int max(int *a, int n) ; double max(double *a, int n) ; char max(char *a, int n); string max(str…

探索直播美颜SDK背后的深度学习算法:智能化美肤与特效实现

美颜SDK背后的技术原理和深度学习算法近期很多读者向小编提问。今天&#xff0c;我将为大家深入讲解直播美颜SDK背后的深度学习算法&#xff0c;以及智能化美肤与特效实现的原理与应用。 一、美颜SDK的背后&#xff1a;深度学习算法 美颜SDK是一种集成了多种美颜功能的软件开…

【APB协议 UVM_Sequencer Driver Monitor_2024.03.04】

apb协议 写时序 地址、写信号、PSEL、写数据信号同时发生变化&#xff0c;即传输的第一个时钟被称为SETUP周期。在下个时钟上升沿,PENABLE信号拉高&#xff0c;表示ENABLE周期&#xff0c;在该周期内&#xff0c;数据、地址以及控制信号都必须保持有效。整个写传输在这个周期…

分享几个Google Chrome谷歌浏览器历史版本下载网站

使用selenium模块的时候&#xff0c;从官网下载的谷歌浏览器版本太高&#xff0c;驱动不支持&#xff0c;所以需要使用历史的谷歌浏览器版本 &#xff0c;这里备份一下以防找不到了。 驱动下载地址&#xff1a;https://registry.npmmirror.com/binary.html?pathchromedriver 文…

WiFi贴码推广能赚钱吗?掌握WiFi贴码推广技巧

“WiFi贴码推广能赚钱吗”是当前很多创业者关注的一个话题&#xff0c;WiFi贴码推广这一新兴的商业模式&#xff0c;是指商家在其门店或者特定场所提供免费WiFi&#xff0c;不需要输入密码wifi二维码即可连接&#xff0c;连接后合作商就会获得一定的收益。这种模式既方便了用户…

【Node.js从基础到高级运用】七、基本的网络编程

基本的网络编程 在这一节中&#xff0c;我们将介绍 Node.js 在网络编程方面的基础&#xff0c;特别是如何使用 Node.js 创建一个 HTTP 服务器。这是构建 Web 应用和服务的核心技能。 创建 HTTP 服务器 Node.js 的 http 模块提供了创建 HTTP 服务器和客户端的能力。以下是创建…

白酒:陈酿过程中的理化变化与香味成分的转化

在豪迈白酒的陈酿过程中&#xff0c;理化变化和香味成分的转化是形成与众不同风味和品质的重要环节。云仓酒庄深入了解和掌握陈酿过程中的理化变化规律&#xff0c;以及香味成分的转化机制&#xff0c;通过科学的方法和精细的管理&#xff0c;提升豪迈白酒的品质和口感。 首先&…

CMake:编写 CMakeLists 文件

文章目录 编辑 CMakeLists 文件CMake 语言注释变量变量范围命令基本命令流控制条件语句循环构造过程定义正则表达式高级命令 本章将介绍编写有效 CMakeList 的基础知识 文件。它将涵盖基本命令和问题 您将需要处理大多数项目。虽然 CMake 可以处理极其复杂的问题 项目&#xff…

Rust 语言的 println! 宏的格式占位符

一、占位符 println! 宏的占位符主要基于 Rust 的格式化语法&#xff0c;它支持多种占位符格式来插入和格式化不同的值。除了 {} 和 {:?} 之外&#xff0c;还有其他几种形式&#xff1a; 基本占位符 {}&#xff1a;用于插入任何实现了 Display trait 的类型的值。 调试占位符…

PaddlePaddle框架安装

提示&#xff1a;可在python环境中进行安装&#xff0c;避免环境污染&#xff0c;创建命令conda create -n xxx_name python3.9,激活conda activate xxx_name 第一步&#xff1a;查看计算机平台版本 在窗口输入查看命令&#xff0c;查看CUDA的版本 nvidia-smi 二、根据以下条件…

webpack和vite的区别

webpack和vite都是现代化web构建工具,但他们在构建速度、开发体验、构建结果等方面有所不同 1、构建速度:vite的速度一般快于webpack (1)传统的构建工具例如webpack在开发过程中会对整个应用或者大部分应用进行打包,之后浏览器才能加载处理之后的包(好比webpack打包先从入口文…

C语言---单身狗问题

1.单身狗初阶 这个题目就是数组里面有一串数字&#xff0c;都是成对存在的&#xff0c;只有一个数字只出现了一次&#xff0c;请你找出来 &#xff08;1&#xff09;异或是满足交换律的&#xff0c;两个相同的数字异或之后是0&#xff1b; &#xff08;2&#xff09;让0和每个…

如何利用数据采集工具,解决医疗数据采集痛点?

在当今信息发达的时代&#xff0c;医疗行业也面临着日益增长的数据量和越来越复杂的管理和挑战。医院是医疗服务的核心机构&#xff0c;需要处理大量病人信息、医疗记录、医疗影像等&#xff0c;从而确保病人最佳的治疗。 但传统的医院数据信息往往存在诸多问题&#xff0c;如…

CVPR 2022 Oral | Bailando: 基于编舞记忆和Actor-Critic GPT的3D舞蹈生成

目录 测试结果&#xff1a; 02 提出的方法 测试结果&#xff1a; 预测有3个步骤&#xff0c;速度比较慢 02 提出的方法 1. 针对舞蹈序列的VQ-VAE和编舞记忆 与之前的方法不同&#xff0c;我们不学习从音频特征到 3D 关键点序列的连续域的直接映射。相反&#xff0c;我们先让…

Oracle Linux 8.9 安装 Python 3.11.8 和 Miniconda

Oracle Linux 8.9 安装 Python 3.11.8 和 Miniconda 1. 安装 Python 3.11.82. 安装 Miniconda 1. 安装 Python 3.11.8 Update system, sudo dnf update -yInstall Library, sudo dnf install curl gcc openssl-devel bzip2-devel libffi-devel zlib-devel wget make git -yI…

Spring Boot 本地部署 JSP

自己是Spring Boot 的初学者&#xff0c;开始看教程的时候发现基本上都是部署的 JSP&#xff0c;但是按照教程一步步走下来始终无法成功&#xff0c;一直都是 404: 查阅各种资料后&#xff0c;总结出一套 Spring Boot 支持 JSP 的流程&#xff1a; 添加依赖 在pom.xml中添加…

Java算法之动态规划

Java算法之动态规划 前言 ​ 最近这一段时间一直在刷算法题&#xff0c;基本上一有时间就会做一两道&#xff0c;这两天做了几道动态规划的问题&#xff0c;动态规划之前一直是我比较头疼的一个问题&#xff0c;感觉好复杂&#xff0c;一遇到这样的问题就想跳过&#xff0c;昨…