邱越-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时,一定外面加个容器包起来
         -->

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1