【10】CSS知识点： 48.动画模块 49.3D转换模块 50.背景尺寸与区域 51.多重背景图片 52.CSS格式总结 52.CSS书写格式总结

48.动画模块

1.动画模块

 div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*transition-property: margin-left;*/
            /*transition-duration: 3s;*/

            /*1.告诉系统需要执行哪个动画*/
            animation-name: lnj;
            /*3.告诉系统动画持续的时长*/
            animation-duration: 3s;
        }
        /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
        @keyframes lnj {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

1.过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

2.其他属性

 div {
            width: 100px;
            height: 50px;
            background-color: red;
            animation-name: sport;
            animation-duration: 2s;
            /*告诉系统多少秒之后开始执行动画*/
            /*animation-delay: 2s;*/
            /*告诉系统动画执行的速度*/
            animation-timing-function: linear;
            /*告诉系统动画需要执行几次*/
            animation-iteration-count: 3;
            /*告诉系统是否需要执行往返动画
            取值:
            normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
            alternate, 往返动画, 执行完一次之后往回执行下一次
            */
            animation-direction: alternate;
        }
        @keyframes sport {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
        div:hover{
            /*
            告诉系统当前动画是否需要暂停
            取值:
            running: 执行动画
            paused: 暂停动画
            */
            animation-play-state: paused;
        }

---

 /*动画添加给谁, 就让谁停止*/
           /* animation-play-state: paused;*/
            
 .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 100px auto;
            animation-name: myRotate;
            animation-duration: 5s;
            animation-delay: 2s;
            /*
            通过我们的观察, 动画是有一定的状态的
            1.等待状态
            2.执行状态
            3.结束状态
            */
            /*
            animation-fill-mode作用:
            指定动画等待状态和结束状态的样式
            取值:
            none: 不做任何改变
            forwards: 让元素结束状态保持动画最后一帧的样式
            backwards: 让元素等待状态的时候显示动画第一帧的样式
            both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
            */
            /*animation-fill-mode: backwards;*/
            /*animation-fill-mode: forwards;*/
            animation-fill-mode: both;
        }
        @keyframes myRotate {
            0%{
                transform: rotate(10deg);
            }
            50%{
                transform: rotate(50deg);
            }
            100%{
                transform: rotate(70deg);
            }
        }

3.连写格式
1.动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

2.动画模块连写格式的简写
animation:动画名称 动画时长;

4.注意：

  /*
                注意点:
                1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
                2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
                */

49.3D转换模块

  .father{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 500px;
            /*
            1.什么是2D和3D
            2D就是一个平面, 只有宽度和高度, 没有厚度
            3D就是一个立体, 有宽度和高度, 还有厚度
            默认情况下所有的元素都是呈2D展现的
            2.如何让某个元素呈3D展现
            和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
            */
            transform-style: preserve-3d;
            transform: rotateY(0deg);
        }

注意：

 /*想看到整个立方的近大远小效果, 就给ul的父元素添加透视*/
            perspective: 500px;
             
        /*注意点:
        只要父元素被拉伸了,子元素也会被拉伸
        */

50.背景尺寸与区域

1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

  ul li:nth-child(1){
            background: url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:200px 100px;
        }
        ul li:nth-child(3){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:100% 80%;
        }
        ul li:nth-child(4){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:auto 100px;
        }
        ul li:nth-child(5){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:100px auto;
        }
        ul li:nth-child(6){
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度和高度都填满元素
            */
            background-size:cover;
        }
        ul li:nth-child(7){
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度或高度都填满元素
            */
            background-size:contain;
        }

2.背景图片定位区域属性

 ul li:nth-child(2){
            /*
            告诉系统背景图片从什么区域开始显示,
            默认情况下就是从padding区域开始显示
            */
            background-origin: padding-box;
        }

3.背景绘制区域属性

 ul li:nth-child(2){
            /*
            背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
            */
            background-clip: padding-box;
        }

51.多重背景图片

 div{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
            /*
            多张背景图片之间用逗号隔开即可
            注意点:
            先添加的背景图片会盖住后添加的背景图片
            建议在编写多重背景时拆开编写
            */
            /*background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;*/
            background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: left top, right top, left bottom;
        }

52.CSS格式总结

1.行内样式
2.内嵌样式
3.外链样式 – 企业开发用外链样式
4.导入样式

外链样式和导入样式区别:
共同点: 都是将CSS代码写到了一个单独的文件中
不同点:
外链样式, 在显示网页时, 会先加载CSS文件, 再显示页面
导入样式, 在显示网页时, 会先显示界面, 再加载CSS文件

外链样式是通过一个HTML标签引入CSS的
而导入样式是通过@import引入CSS的, 而@import是CSS2.1推出, 所以导入样式存在兼容问题

优先级问题
行内样式的优先级最高
其它写法谁写在后面就听谁的

52.CSS书写格式总结

1.行内样式
2.内嵌样式
3.外链样式
4.导入样式

外链样式和导入样式异同
相同点: 都是把CSS代码写到了一个单独的文件中
不同点:
1.外链样式会先加载样式, 再显示界面
2.导入样式会先显示界面, 再加载样式

1.外链样式是通过HTML标签链接样式
2.导入样式是CSS2.1新增的, 所以有兼容问题