标签：01 尾田 前端 旋转式 content nav 漫画 50% 海贼
在线演示：旋转式导航栏
我的个人网站：前端项目汇总
前置知识：CSS3动画、简单JS
文章目录
一.分析
页面设计
页面由三部分组成，分别是：
- 左上角的控制按钮
- 左侧导航栏
- 右侧网页主体部分
左上角的控制按钮是一个四分之一圆，实现方法为：用border-radius: 50%; 构造一个圆，然后用transform: translate(-50%,-50%);移动圆心至页面左上顶点
图标获取：ionic图标库
利用定位将图标移动到合适的位置即可
网页主体部分：随便写写，个人放了篇海贼王的百度百科上去
导航栏的实现：导航栏其实不存在，设置body的背景颜色为灰色，网页主体部分旋转时就将背景颜色露出来了，形成了导航栏的视觉效果
动画效果
分析一下页面中变化的元素：
- 网页主体部分逆时针旋转，利用
transform:rotate(-20deg)实现 - 导航栏从页面外平移入页面，利用
transform:translateX(120px)实现
由于动画是在点击左上角按钮后触发的，所以可以这么操作：将动画效果写入类中，点击事件触发后为对应元素添加类，再点击删除类即可
二.代码
HTML + JS ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="./static/index.css">
<script type="text/javascript" src="./static/index.js"></script>
</head>
<body>
<div id="circle_btn">
<div id="open" class="icon">
<img src="./static/img/menu-outline.svg">
</div>
<div id="close" class="icon">
<img src="./static/img/close-outline.svg">
</div>
</div>
<div id="content">
<div id="article">
<h1>海贼王</h1>
<small>(1997年日本漫画家尾田荣一郎创作的少年漫画)</small>
<p>
《海贼王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《海贼王》于1999年10月20日起在富士电视台首播。
</p>
<p>
2012年5月11日，《海贼王》获得第41回日本漫画家协会赏。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日” 。
</p>
<div class="img">
<img src="./static/img/pic1.jpg" alt="图片加载中">
</div>
<h2>创作背景</h2>
<p>
创作海贼故事是尾田荣一郎长久以来的梦想，他小时候一直很好奇为什么没有什么漫画以海贼为主题，他顶多只知道有《北海小英雄》这部动画。他认为男孩长到某个年纪后应该就会想要出海寻宝才对。尾田从小就很想看海贼的漫画，那个时候他对自己说，如果要自己画的话，那就一定会画海贼的故事。不管作品卖不卖得掉，他都是作好了心理准备才会这么选择的，纯粹就是他自己想看而已。
</p>
<p>
尾田荣一郎在初一时，第一次画了海贼漫画，而尾田对孩子冒险所抱着的想象太丰富，就一本笔记本也画不完。他认识到用“一期完”的形式来画海贼漫画是不可能的，于是他决定要在《少年JUMP》上连载海贼漫画。
</p>
<p>
1997年，尾田荣一郎创作了海贼漫画《Romance Dawn》，这部一话完结的短篇漫画正是《航海王》的创作原型，后来这个名字还被《航海王》第一话作为副标题使用。当然，虽然两部漫画的主人公都叫路飞，性格却判若两人，剧情也并不相同。
</p>
<p>
然而，《RomanceDawn》最初因页数关系没法《少年JUMP》里刊登，于是他将《Romance Dawn》的内容删减，用“一期完”的形式在《少年JUMP》的本志和增刊上刊载了它，因为尾田当时已经决定将《Romance Dawn》作为《航海王》的雏形，他也准备以《航海王》的形式书写另一个版本的《Romance Dawn》。怀着两部海贼漫画，尾田荣一郎辞去了和月伸宏的《浪客剑心》助理一职，向连载方面发展 。
</p>
</div>
</div>
<div id="nav">
<ul>
<li><a href="http://www.qiuker.top/">个人网站</a></li>
<li><a href="http://www.qiuker.top:8080/demo1">前端项目</a></li>
<li><a href="https://blog.csdn.net/Qiuker_jl">我的博客</a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementById("circle_btn");
var open=document.getElementById("open");
var close=document.getElementById("close");
var content=document.getElementById("content");
var nav=document.getElementById("nav");
var flag=1; //1 open -1 close
btn.onclick=function(){
if(flag==1){
open.style.display="none";
close.style.display="block"; //控制左上图标变换
content.className="content_active"; //控制网页主体旋转
nav.className="nav_active"; //控制导航栏平移出现
}
else{
open.style.display="block";
close.style.display="none";
content.className="";
nav.className="";
}
flag*=-1;
}
</script>
CSS :
* {
margin: 0;
padding: 0;
}
body {
background-color: #232425;
}
#circle_btn {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #2396EF;
position: absolute;
z-index: 3;
transform: translate(-50%,-50%);
/*控制圆的圆心在页面左上角*/
}
#circle_btn .icon{
width: 50px;
position: absolute;
left: 50%;
top: 50%;
cursor: pointer;
}
#circle_btn .icon img {
width: 100%;
}
#close {
display: none;
}
#content {
width: 100vw;
height: 800px;
z-index: 2;
background-color: white;
transform-origin: left top;
transition-property: transform;
transition-duration: 1s;
}
#content > #article{
height: 700px;
width: 80vw;
position: absolute;
left: 10vw;
top: 5vh;
}
#content #article p {
margin: 10px 0;
text-indent: 8px;
}
#content .img{
margin: 20px 0px;
width: 100%;
}
#content .img img{
width: 100%;
}
.content_active {
transform: rotate(-20deg);
}
.nav_active {
transform: translateX(120px);
}
#nav {
/*动画变换*/
transition-duration: 0.6s;
transition-delay: 0.2s;
/*位置*/
position: absolute;
bottom: 100px;
left: -120px;
}
#nav ul{
list-style: none;
}
#nav ul li {
display: block;
margin-top: 30px;
}
#nav ul li:nth-child(1){
margin-left: 15px;
}
#nav ul li:nth-child(2){
margin-left: 25px;
}
#nav ul li:nth-child(3){
margin-left: 35px;
}
#nav ul li a {
text-decoration: none;
/*字体样式*/
color: white;
font-size: 20px;
font-weight: 600;
font-family: "SimSun","KaiTi";
}
标签：01,尾田,前端,旋转式,content,nav,漫画,50%,海贼 来源： https://blog.csdn.net/Qiuker_jl/article/details/121912133
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。