2019-08-19 HTMl 5 第二天

图片.png

---学习视频是黑马程序员pink老师的教学视频
传送门

---

3 css 3 2d转换

---

3.2 2d转换中心点

语法：transform-origin:x y;

注意后面的参数 x y用空格隔开

1.x y默认转换的中心点实元素的中心点（50% 50%）
语法：transform-origin（）

2.还可以给 x y 设置像素或者方位名词（top bottom left right center）
语法：transform-origin:bottom left;

3.还可以是像素
语法：transform-origin:50px 50px;

动画显示时间：transition: all 5s;

---

3.3 2d转换缩放 scale

语法：transform:scale(x,y)

transform: scale(0.5,0.5); 0.5代表倍数

等比缩放

transform: scale(0.5);写一个值就行

scale不会影响其他元素 而且可以设置中心点

注意：同时使用多次变形 其格式为：

transform：translate()  rotate()  scale()

其顺序会影响效果
当我们同时有位移和其它属性的时候，记得要将位移方法最前面

---

4 动画

---

4.1 animation

语法：

            @keyframes move {
                0%{
                    transform: translateX(0px);
                }
                100%{
                    transform: translateX(1000px);
                }
            }
            div{
                width: 100px;
                height: 100px;
                background: #000;
                animation-name: move;
                animation-duration: 2s;
            }

动画序列：

1.0%是动画的开始，100%是动画的完成

2.在@keyframes中规定某项css央视 就能创建当前央视逐渐改为新样式的动画效果

3.动画实施元素从一种央视逐渐变化成为另一种样式的
效果 可以改变任意的的样式.次数

4. 请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%

动画常用属性

/* 名称 */
                animation-name: move;
                /* 持续时间 */
                animation-duration: 2s;
                /* 运动曲线 */
                animation-timing-function: ease;
                /* 何时开始 */
                animation-delay: 0s;
                /* 播放次数  indinite:无限循环*/
                animation-iteration-count: infinite;
                /* 下一次是否逆向播放 */
                animation-direction: normal; /* 逆向  alternate */
                /* 规定动画是否正在运行或暂停，默认是 running 还有pause*/
                animation-play-state: running;
                /* 规定动画结束后的状态  保持forwards  回到起始backwards */
                animation-fill-mode: backwards;


div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
/*简写：*/
div
{
animation: myfirst 5s linear 2s infinite alternate;
名字  时间  匀速  开始时间  无限循环  逆向
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

---

5 3d转换

---

5.1 3d 位移

transform: translate3d(100px,100px,100px);

透视：perspective