邱越-20201029

CCS动画特效:  transition: all 3s ;/* 过渡效果 */
                 transform: rotateX(360deg) ;/* 旋转 */
    transform: scale(0);/* 缩放 */
    transform: skew(45deg);/* 倾斜 */
    transform: scale(0) matrix(-1,-1,-1,0,-1,1);/* 扭曲2行3列的三角函数矩阵     */
    overflow: hidden;/* 子容器超过父容器的部分隐藏 */

animation（动画）:  

name    用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致

duration    指定元素播放动画所持续的时间

timing-function 规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率

delay   定义在浏览器开始执行动画之前等待的时间，值整个animation执行之前等待的时间

iteration-count 定义动画的播放次数，可选具体次数或者无限(infinite)

direction   设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)

play-state  控制元素动画的播放状态，通过此来控制动画的暂停和继续，两个值：running(继续)，paused(暂停)

fill-mode   控制动画结束后，元素的样式，有四个值：none(回到动画没开始时的状态)，forwards(动画结束后动画停留在结束状态)，backwords(动画回到第一帧的状态)，both(根据animation-direction轮流应用forwards和backwards规则)，注意与iteration-count不要冲突(动画执行无限次)


transition（过渡）  :

transition-property 规定设置过渡效果的 CSS 属性的名称

transition-duration 规定完成过渡效果需要多少秒或毫秒

transition-timing-function  规定速度效果的速度曲线

transition-delay    定义过渡效果何时开始
                                 


transform（变形）   用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）   translate只是transform的一个属性值，即移动。


盒子具有内容（content）、内边距（padding）、边框（border）、外边距（margin）四个属性
  
盒子模型具有四个属性：
content(内容): width和height 
border(边框厚度):border
padding(内填充值):padding
margin(外边距):margin
盒子宽度占位：width+padding+border+margin
盒子高度占位：height+padding+border+margin
box-shadow: 0px 0px 150px hotpink inset;/* 水平  垂直  模糊距离    盒子阴影 */
/* border-radius: 30px; *//* 圆角 */
border-top-left-radius: 80px;/* 左上圆角 */

<!-- 块级标签和行级标签的属性转化
         1、块级标签加了float（浮动）就有了行级标签不独占一行的特性
         特别注意：使用float时，一定外面加个容器包起来
         -->

心得体会： 通过今天的实训，我收获了很多，一方面学习到了许多以前没学过的专业知识与知识的应用，另一方面还提高了自己动手做项目的能力。是对我能力的进一步锻炼，也是一种考验。从中获得的诸多收获，也是很可贵的，是非常有意义的。在实训中我学到了许多新的知识。是一个让我把书本上的理论知识运用于实践中的好机会，原来，学的时候感叹学的内容太难懂，现在想来，有些其实并不难，关键在于理解。