【后端学前端】第二天 css动画动感菜单（css变量、过渡动画、过渡延迟、js动态切换菜单）

1、学习信息

2、源码

3、变量

1.1 定义变量

1.2 使用变量

1.3 calc() 函数

4、定位absolute和fixed

5、transform 和 transition，动画

5.1 变形transform

5.2 transition

5.3 动画animation

6、todo

1、学习信息

视频地址：css动画动感菜单（css变量、过渡动画、过渡延迟、js动态切换菜单）_哔哩哔哩_bilibili

2、源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {min-height: 100vh;background: linear-gradient(to bottom,#577ad4,#ad3d88);}.nav {width: 250px;height: 50px;background-color: #fff;position: fixed; /*固定在右上角*/top: 20px;right: 20px;z-index: 100; /*放在最上面*/}.toggle {width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;cursor: pointer;color: #ff216d;padding: 5px 20px;}.toggle::before {content: 'Menu';margin-right: 10px;}.toggle span::before,.toggle span::after {content: '';position: absolute;top: 20px;left: 0;width: 100%;height: 2px;background-color: #ff216d;transition: 0.5s;}.toggle span:after {top: auto;bottom: 20px;}.toggle.active:before{content: 'Close';margin-left: 10px;}.toggle.active span::before {transform: rotate(225deg);top: 24px;}.toggle.active span::after {transform: rotate(135deg);bottom: 24px;}ul {position: relative;list-style: none;display: flex;flex-direction: column;}ul li {height: 50px;padding: 10px 20px;background-color: #ffffff;color: #333;cursor: pointer;position: relative;list-style: none;}li {visibility: hidden;opacity: 0;transform: translateX(-250px);transition: .5s;transition-delay: calc(0.1s*var(--i));}.nav.active li {visibility: visible;opacity: 1;transform: translateX(0px);}</style><script>window.onload = function (){const nav = document.querySelector(".nav")const toggle = document.querySelector(".toggle")toggle.addEventListener('click',()=>{toggle.classList.toggle('active')nav.classList.toggle('active')});}</script>
</head>
<body><div class="nav"><div class="toggle"><span></span></div><ul><li style="--i:0">Home</li><li style="--i:1">About</li><li style="--i:2">Services</li><li style="--i:3">Work</li><li style="--i:4">Contract</li></ul></div>
</body>
</html>

3、变量

1.1 定义变量

声明变量的时候，变量名前面要加两根连词线（--）。变量名大小写敏感，

为什么选择两根连词线（--）表示变量？因为

$foo被 Sass 用掉了，

@foo被 Less 用掉了。

为了不产生冲突，官方的 CSS 变量就改用两根连词线了

1.2 使用变量

var() 函数

var()函数用于读取变量。

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

注意，变量值只能用作属性值，不能用作属性名。

1.3 calc() 函数

calc() 函数用于动态计算长度值。

如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则；

4、定位absolute和fixed

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

5、transform 和 transition，动画

5.1 变形transform

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作

总结：没有过程

5.2 transition

transition 是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

transition: 要过渡的属性花费时间运动曲线何时开始;

零或一个表示要使用的过渡函数

零，一或两个时间值。可以解析为时间的第一个值被分配给 transition-duration，并且可以解析为时间的第二个值被分配给 transition-delay。

注： transition元素所在的是动画的结束点

5.3 动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

@keyframes test {from {width: 100px;height: 20px;}50% {height: 50px;}to {width: 130px;height: 30px;background-color: #0f0;}}.box:hover {animation: test 2s;}

以上代码设置了一个名称为test的动画，动画执行时间为2s，定义了从开始（from|0%)到结束(to|100%)的动画行为，开始的from可以省略，但结束的不可省略