今天完成的事情： 

1.制作导航栏与汉堡菜单

input[type=checked]标签用于标识checked 和unchecked 属性，元素是隐藏的，需要用checkbox元素的伪类选择器:checked就可以检测到元素的checked状态，通过label标签来触发checkbox

label标签用于触发下拉菜单：

• <label> 标签为 input 元素定义标注（标记）。
  

•       label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
  

• <label> 标签的 for 属性应当与相关元素的 id 属性相同。
  

• <input type="checkbox" id="checkbox_toggle">

  <label class="pull" for="checkbox_toggle">

能使用显示关联的表单元素有：

1.  input type="text" 文本框，点击标签时关联的文本框获得焦点。
   
2. input type="checkbox" 复选框，点击标签时选中或取消选中复选框。ps：做汉堡菜单需要用到此效果
   
3. input type="radio" 单选框，点击标签时选中单选框。
   
4. input type="file" 文件上传，点击标签时打开文件选择对话框。
   
5. input type="password" 密码框，点击标签时密码框获得焦点。
   
6. textarea 文本域，点击标签时文本域获得焦点。
   
7. select 下拉框，点击标签时，下拉框获得焦点，不过并不展开下拉框选项。
   

‍‍

同时需要把菜单的元素隐藏：

通过:checked选择器与兄弟选择器来选择对应菜单的状态，当checkbox为选中状态时，下拉菜单就显示，否则隐藏

2.轮播图的制作：

制作轮播图需要用到‍‍animation:‍‍属性：

‍‍01.关键帧(keyframes) - 定义动画在不同阶段的状态。

动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）

css属性 - 就是css元素不同关键帧下的状态。

      1.关键帧主要分为3个阶段，0%、50%、100%。‍‍

  2.‍‍动画播放时长为15s、循环播放(infinite)、以ease-out(相对于匀速，开始时快，结束时候间慢)方式进行播放,alternate‍‍(动画应该轮流反向播放)

  3.播放的方向是向左，0%、25%是为了到达一个暂停的一个目的，

  margin-left: -100%;

  margin-left: -200%;

  margin-left: -300%;

 是相对于播放的那张图的宽度，比方说一张图的大小为300px；第二张图就要像左负600px以此类推

2.动画属性

1. 动画属性可以理解为播放器的相关功能，一个最基本的播放器应该具有：播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。
2. 简写属性形式:

3.    animation:

      [animation-name] [animation-duration] // 动画的名称、持续时间

      [animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间

      [animation-iteration-count] [animation-direction] // 播放次数、播放顺序

      [animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

4. 01.时间函数（animation-timing-function）
5. 默认值，如果没有显示写调用的函数，则默认为ease。

6. 

   ‍‍02.动画方向（animation-direction）‍‍

7. ‍‍animation-direction属性表示CSS动画是否反向播放。
   可选配置参数为:‍‍

8. animation-direction: normal 正序播放

   animation-direction: reverse 倒序播放

   animation-direction: alternate 交替播放

   animation-direction: alternate-reverse 反向交替播放

   03.动画延迟（animation-delay）

   animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。
   默认值0s，表示动画在该元素上后立即开始执行。
   该值以秒(s)或者毫秒(ms)为单位。

‍‍‍‍

‍‍‍

‍‍明天计划的事情： 争取完成任务14.15
遇到的问题：轮播图下面的小圆点也要进行轮播

目前还没开始，思路还是和做动画效果应该一样吧
收获：checked与‍‍animation‍‍的应用