4.15

【学习进度】

今天学习了css的各种动画效果，以及各种选择器之间的区别于各自优势。还有我发现之前做的导航栏似乎做错了，虽然看起来一模一样，但是感觉不应该用横向列表，这使后面一些功能不能完成，准备继续往下看教程，找解决方案。

 

【重要知识点】

①子元素选择器         body>p             body>p>i

   后代选择器             body  p             body  i

 区别：子元素选择器只能选择作为某元素子元素的元素（就是只能选择儿子不能直接选孙子）

②强行不换行      white-space:nowrap;

③动画过度属性：

   transition-property               过度的名称

   transition-duration               过度效果花费的时间

   transition-timing                  过度效果的时间曲线

   transition-delay                   过度效果的开始时间

④

移动（x轴y轴）                                            transform: translate(200px,100px);

旋转120度                                                     transform: rotate(120deg);

宽度和高度倍数变化                                     transform:scale(1,2)

x轴y轴倾斜50度                                            transform: skew(50deg,50deg);

3D效果变化（x轴y轴）                                 transform: rotateX(120deg);         transform: rotateY(120deg);