一木知夏

工作之余，我负责过公司前端岗位的一些技术面试，一直在想，能不能对这个经历做一个总结，遂有了这篇文章。

这篇文章我准备从实现一个非常简单的曲线动画效果入手，帮助大家彻底地弄懂什么是贝塞尔曲线，以及它有哪些特性，文章中有一点点数学公式，但是都非常简单:)。 在写代码之前，先了解一下什么是贝塞尔曲线吧。 贝塞尔曲线（Bezier curve）是计算机图形学中相当重要的参数曲线，它通过…

1.js的引入方式 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。简单来说就是教网页做事.和css一样js也有三种相同的引入方式,注意 行内式使用onclick,内嵌

什么是响应式布局? 1.网页可以根据不同的设备或窗口大小呈现出不同的效果 2.使用响应式布局可以使一个网页适配所有设备 3.响应式布局的关键就是媒体查询 4.通过媒体查询可以为不同的设备、设备的 不同

屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好 百分比布局特点宽度自适应，高度固定 Flex布局更多的解决了盒子的排列方式，高度很难适配 所以都不能

FLex布局优点: 1.是一种 浏览器提倡 的 布局模型 布局网页 更简单、灵活 3.避免 浮动脱标 的问题 设置方式: 父元素添加 display: flex ，子元素可以自动的挤压或拉伸 主轴对齐

就像圣杯一样无论中间的内容大小如何改变(自适应)两边的盒子都是不变的 如图: 圣杯布局原理 效果图如下 圣杯布局起源 In Search of the Holy Grail html部分 分为左中右三

使图中的云朵,热气球,长颈鹿和中间文字实现动画特效 动画名字参照css类选择器命名 动画时长和延迟时间别忘了带单位 s infinate 无限循环动画（重复次数） alternate 为反向 就是左右

实现如下效果图: 动画名字参照css类选择器命名 动画时长和延迟时间别忘了带单位 s infinate 无限循环动画（重复次数） alternate 为反向 就是左右来回执行动画 forwards 动