解玲安-20201029

一、动画
transition: all/*(所有的都有过渡效果)*/  3s/*(动画时长,必须要有)*/ ease/*(速度)*/ 3s/*(延迟播放)*/;/*过渡,一般不放在伪类选择器中。all(所有的都有过渡效果),3s(动画时长,必须要有),*/
transform: rotate(300deg);/*旋转 rotatey沿y轴旋转*/
    transform: scale(0.5);/*缩放 scale(1.5)放大1.5倍  scale(0.1)缩小*/
    transform: skew(45deg);/*倾斜    45度  -45deg */
    transform: translate(100px);/*平移 100px向右平移,负的反方向*/
    transform: matrix(-1,-1,-1,0,-1,-1) ;/*扭曲  2行3列的三角函数矩阵*//*(要想同时实现,则写在同一语句中,中间用空格);*/
overflow: hidden;/*子容器超出父容器的部分隐藏*/
    transform: all 3s;
二、自定义动画
animation:change 3s;/*绑定动画*/
animation: change/*(动画名称)*/ 3s ease 1s forwards/*(让动画停在最后一帧)*/ infinite/*(循环播放)*//*2(播放的次数)*/ alternate/*(1——2——1的顺序)*/ running/*(控制它不播放)*/;
三、盒子模型
/*1、*/border: 1px #dedede solid;/*solid实线*/
    padding-top: 100px;/*2、padding-top内填充*/
    padding-left: 100px;/*2、padding:100px上下左右,padding:100px上下  200px左右  ,上、右、下、左*/
    box-sizing: content-box;/*  border-box边框包含在盒子里,content-box边框不包含在盒子里*/
    box-shadow: 0px 0px 30px deeppink inset;/*默认是外阴影  10px模糊距离  有inset内阴影*/
    /*border-radius: 50%;/*圆角  给像素是圆角*/
    border-top-left-radius: 200px;/*左上角*/
    border-top-right-radius: 200px;/*右上角*/
    border-bottom-left-radius: 200px;/*左下角*/
                /*1、margin-top: 100px;/*小盒子的外边距,margin—bottom下边距,padding-top大盒子的内边距*/
    /*1、margin-left: 100px;/*左边距*/
四、块级标签和行级标签的属性转换
1、块级标签当他加float(浮动)时就有了行级标签不独占一行的特性
***特别注意:给该部分使用浮动时,一定要在该部分的外面价格容器将他包起来
float: left;/*浮动*/
margin: 30px;/*边距*/

学习心得:
今天的学习内容,个人感觉难度较大,操作起来比较困难。当几个条件放在一起用的时候感觉脑子都要糊住了。但是不得不说,虽然只是几天的时间,学到了很多知识,感觉很有意义,每天虽然很累,可是很充实。

标签

评论

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