GitHub热门前端练手项目,纯HTML、CSS、JS实现,50天50个项目,每日一个项目,打卡活动,解读项目中的知识点
GitHub项目官网连接
50Projects in 50 Days
项目展示
实现一个导航栏展开和收起的动画
源代码
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="style.css" />
<title>Animated Navigation</title>
</head>
<body>
<nav class="active" id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="icon" id="toggle">
<div class="line line1"></div>
<div class="line line2"></div>
</button>
</nav>
<script src="script.js"></script>
<!-- Dribbble link: https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui -->
</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'))
知识点讲解
HTML
HTML没啥好说的
CSS
CSS渐变
CSS渐变可以使颜色在两种或多种指定颜色之间平滑过渡。
CSS定义了两种渐变类型:
- 线性渐变(向下、向上、某个确定的方向)
- 径向渐变(由其中心定义)
线性渐变
如果需要创建线性渐变,那么至少需要两个色标,还可以设置起点和方向
这么用
#grad {
background-image: linear-gradient(red, yellow, blue);
}
linear-gradient()
线性渐变函数
MDN中是这么说的:CSS linear-gradient()
函数用于创建一个表示两种或多种颜色线性渐变的图片
在函数内部还可以指定渐变的方向
从上到下
linear-gradient
的默认效果
div {
height: 200px;
width: 200px;
background-image: linear-gradient(red,yellow);
}
从左到右
div {
height: 200px;
width: 200px;
background-image: linear-gradient(to right,red,yellow);
}
沿着对角线
div {
height: 200px;
width: 200px;
background-image: linear-gradient(to right bottom,red,yellow);
}
使用角度
角度是指水平线和渐变线之间的角度
- 0deg 就是 to top
- 180deg 就是 to bottom
- 90deg 就是 to right
background-image: linear-gradient(0deg,red,yellow);
background-image: linear-gradient(90deg,red,yellow);
background-image: linear-gradient(180deg,red,yellow);
百分比
颜色后面跟上百分比,像这样
background-image: linear-gradient(red 10%, blue 50%, orange 100%);
百分比指定颜色的标椎中心线位置,比如说red 10%
就是说,red的标准颜色在10%的位置,百分比之间的区域是渐变区域
多个颜色
还可以指定多个颜色
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
其他
linear-gradient()
中的颜色参数不仅仅是预定的颜色值(red,grenn,yellow)
还可以是
rgb
值 ,rgb(163, 79, 79)- 十六进制,#FF0000
rgba
值,rgba(163, 79, 79,0.5), 最后一个参数用来指定透明度
还可以使用repeating-linear-gradient()
函数来重复线性渐变
background-image: repeating-linear-gradient(red,green 10%,blue 20%);
径向渐变
径向渐变就是由中心决定
需要用到radial-gradient()
这个函数可以创建一个渐变背景图片
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认地,shape 为椭圆形,size 为最远角,position 为中心。
background-image: radial-gradient(yellow,orange,red);
不同间距的色标
色标之间的间隔是不同的
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
设置形状
可以接收circle
(圆)和ellipse
(椭圆),默认值是ellipse
椭圆
background-image: radial-gradient(circle, red, yellow, green);
渐变中心
使用at
关键字, 百分比是元素宽高的比例
background-image: radial-gradient(circle at 70% 80%, red, yellow, green);
大小
可以定义渐变的大小,了解即可
- closest-side
- farthest-side
- closest-corner
- farthest-corner
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
repeating-radial-gradient()
重复渐变,跟repeating-linear-gradient()
用法相同,不说了
JS
JS这些没啥好说的,利用JS实现动画的原理就是修改元素的样式