蓝鸥8.9

七夕诶，可还是苦逼地上课。今天老师也是牺牲了自己的一早上幸福来教了我们一些新的内容，当然下午他去哪了还真卜好说！！在讲解今天教的内容前，我要补一下前面的知识，这个知识点还是我做一个正方形的hover效果才发现的我不会的知识点，所谓hover即鼠标悬停产生的新效果，我做的正方形是鼠标悬停在这上面，正方形各边都会向自己面对的方向散开，而我做到的只是鼠标悬停哪面，哪面在散，所以是失败的，直到发现这个代码： 假设big是父级块的class名，small是各个子级块的class名。.big:hover>.small:nth-child(n){},这样做就是鼠标悬停在父级，改变的是子级标签的样式，才算成功。

今天主要教了动画animation效果，他有7个属性，分别是animation-name(动画名称，后面弄关键帧时要用到),animation-duration(动画持续时间),animation-timing-function

（和先前讲的过度transition属性差不多，属性值一样，linear匀速，ease逐渐变慢，ease-in先慢后快，ease-out先快后慢，ease-in-out先慢后快在变慢）,animation-iteration-count(循环次数，无限循环为属性值:infinite),animation-direction(动画方向,有属性值alternate交替的意思),animation-delay(动画延迟时间),animation-fill-mode（属性值是forwards是终止循环次数）。大致就是这样了。

接着便是与那时学的响应式布局用到的@media媒体查询差不多性质的关键帧@keyframes+animation-name｛｝，{}里面的样式有两种，1、from｛｝to｛｝2、0%｛｝

50%｛｝100%｛｝，他们里面的｛｝写的是变化的属性及属性值把。这样一来你就可以做会动的动画了。今天还有一个比较有趣，那就是不用导入图片，直接用代码编出一座座山，一条条路，一个个太阳，挺有趣的，哈哈！

最后，所谓动画可以增强用户体验，带给用户强烈的感觉。一天又过去了~