css3提特性提高动画2D 3D效果笔记

最新推荐文章于 2022-03-18 19:01:09 发布

豆沙包(干饭王)

最新推荐文章于 2022-03-18 19:01:09 发布

阅读量340

点赞数 2

文章标签： css3 3d 动画

本文链接：https://blog.csdn.net/linziwang/article/details/121179198

版权

一、2D转换 (transform) 是CSS3中具有颠覆的特征之一，可以实现元素的位移、旋转、缩放等效果。

移动: translate
旋转: rotate
缩放: scale

1、转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1.1、语法

transform: translate（x，y）;或者分开写
transform: translateX（n）
transform: translateY（h）

1.2、重点

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:（50％50％）;
对行内标签没有效果

 <style>
                /* 移动盒子的位置：定位 盒子的外边距  2d转移移动 */
                div{
                    width: 200px;
                    height: 200px;
                    background-color: pink;
                    /* transform: translate(x,y); */
                    /* transform: translate(100px,0);  /* 两个元素全写 */
                    /* transform: translateX(100px);  /* 单独的一个值 */
                    transform: translateY(100px); 
                }
            </style>

**利用 transform 实现水平居中** 
  <style>
        p{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /* 利用 transform 实现水平居中 */
            transform: translate(-50%,-50%);
        }
    </style>

2、转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

2.1、语法

transform: rotate(deg) 度数;

2.2、重点

rotate里面跟度数，单位是deg比如 rotate（45deg）
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

 <style>
        img{
            width: 150px;
            height: 150px;
            /* 顺时针旋转45渡   deg是渡的意思 */
            transform: rotate(45deg);  
            border-radius: 50%;
            border: 5px solid pink;
            transition: all 2;
        }
        img:hover{
            transform: rotate(360deg);
        }
    </style>

2.3、利用旋转 rotate 制作小三角，并且实现京东效果

在这里插入图片描述

<style>
        div{
            position: relative;
            width: 450px;
            height: 35px;
            border: 1px solid black;
        }
        div::after{
            position: absolute;
            content: '';
            top: 6px;
            right: 13px;
            height: 10px;
            width: 10px;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            transform: rotate(45deg);
            transition: all 0.6s;
        }
        /* 鼠标经过div  再让小三角旋转 */
        div:hover::after{
            transform: rotate(225deg);
        }
    </style>

1.3 2D转换中心点 transform-origin

3.1、语法

transform -origin: (x,y);

3.2、重点

注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点（50％50％）
还可以给xy设置像素或者方位名词（ top bottom left right center）

 <style>
        div{
            /*1、 可以跟方位名词*/
            transform-origin: left bottom;   
            /*2、 但默认是 50% 50% 等价于 center center */
            /* 3、可以是px像素 */
            transform: 50px 50px;
        }
    </style>

3、 2D旋转之缩放 scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

3.1、语法

transform:scale(x,y)

3.2、重点

注意其中的x和y用逗号分隔
transform: scale（1，1）:宽和高都放大一倍，相对于没有放大
transform: scale（2，2）:宽和高都放大了2倍
transform scale（2）:只写一个参数，第二个参数则和第一个参数一样，相当于 scale（2，2）
transform scale（0.5，0.5）:缩小
sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

 <style>
        div:hover{
            /* 1.里面写的数字不限单位 就是倍数的意思 1 就是1倍 2就是2倍 */
            /* transform:scale(x,y) */
            /* transform: scale(2,2); */
            /* 2 、修改了宽度的2倍，高度的1倍 */
            /* transform: scale(2,1);  */
            /* 3、等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是 宽度修改2倍 高度也修改了2倍 */
            /* transform: scale(2); */
            /* 4、我们可以进行缩小 小于1 就是缩放 */
            transform: scale(0.5);
            /* 5、scale的优势之处：不会影响其他盒子 而且可以设置缩放的中心点 */
        }
    </style>

4、 2D转换的综合写法

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

4.1、语法

transform: translate() rotated() scale() (中间空格隔开)

4.2、重点

1.同时使用多个转换，其格式为: transform: translate() rotated() scale().等，
2.其顺序会影转换的效果。（先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

<style>
       div:hover{
           transform: translate(100px) rotate(180deg) scale(1.2);
           }
    </style>

2D转换总结

转换 transform我们简单理解就是变形有2D和3D之分
我们暂且学了三个分别是位移旋转和缩放
2D移动 translate（xy）最大的优势是不影响其他盒子，里面参数用％，是相对于自身宽度和高度来计算的
可以分开写比如 translate（x）和 translater（y）
2D旋转 rotate（度数）可以实现旋转元素度数的单位是deg
2D缩放sace（xy）里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子
设置转换中心点 transform -origin:xy:参数可以百分比、像素或者是方位名词
放到最前当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

二、动画（ animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制个或一组动画

常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

5 、动画的基本使用

5.1、制作动画分为两步：

定义动画
再使用（调用）动画
用 keyframes定义动画（类似定义类选择器）

<style>
    @keyframes动画名称 {
        0% {
            width: 100px
        }
        100%{
            width: 200px;
        }
    }    
</style>

动画系列

0％是动画的开始，100％是动画的完成。这样的规则就是动画序列。
在＠ keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词“from“和to““，等同于0％和100％

<style>
    /* 我们想页面一打开，一个盒子就从左边走到右边 */
    /* 1.定义动画 */
    @keyframes move {
        0% {
           transform: translateX(0px);
        }
        100%{
            transform: translateX(1000px);
        }
    }    

    /* 调用动画 */
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
        /*1、 调用动画 （动画名称） */
        animation-name: move;
        /*2、 持续时间 */
        animation-duration: 2s;
    }
</style>

5.2、动画常用属性：

在这里插入图片描述

 <style>
 @keyframes move {
        0% {
           transform: translateX(0px);
        }
        100%{
            transform: translateX(1000px);
        }
    }    
       div{
          width: 200px;
          height: 200px;
          background-color: pink; 
          /* 动画名称 */
          animation-name: move;
          /* 持续时间 */
          animation-duration: 3s;
          /* 运动曲线 */
          animation-timing-function: ease;
          /* 何时开始 */
          animation-delay: 1s;
          /* 重复次数  iteration  重复的 conut  次数  infinite 无限 */
          animation-iteration-count: infinite;
          /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
          animation-direction: alternate;
          /* 动画借宿后的状态 默认的是 backwards 回到起始状态 我们可以停留在结束状态 forwards */
          animation-fill-mode: forwards;
       }
       /* 鼠标经过停止动画 */
         div:hover{
         animation-play-state: paused; 
       }  
    </style>

5.3、动画简写属性：

语法：animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

 <style>
    div{
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        animation: move 2s  ease 1s infinite alternate forwards;
    }
    </style>

简写属性里面不包含 animation-play-state
暂停动画: animation- play-state: pulsed;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来: animation- direction: alternate
盒子动画结束后，停在结束位置: animation -fill-mode: forwards

5.4、速度曲线细节：

animation- timing- function:规定动画的速度曲线，默认是“ease

<style>
        div{
/* steps 就是分几步来完成我们的动画 有了steps 就不要再写ease 或者linear */
     /* animation: name duration timing-function delay 
iteration-count direction fill-mode; */
      animation: w 2s steps(10) forwards;
        }
    </style>

三、3D转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

有什么特点：
近大远小
物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特忘就能产出3D效果

6.1三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴:水平向右注意: X右边是正值，左边是负值
y轴:垂直向下注意: y下面是正值，上面是负值
z轴:垂直屏幕注意: 往外面是正值，往里面是负值

6.2 3D转换

3D转换我们主要学习工作中最常用的3D位移和3D旋转
主要知识点

3D位移 translate3d（Xyz）
3D旋转 rotate3d（xyz）
透视: perspective
3D呈现 transfrom-style

3D移动translate3D

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform: translate（100px）:仅仅是在x轴上移动
transform: translater（100px）:仅仅是在Y轴上移动
translform: translate（100px）:仅仅是在Z轴上移动（注意: translateZ一般用px单位）
transform: translate3d（x,y,z）:其中x,y,z分别指要移动的轴的方向的距离

6.3 透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的
在这里插入图片描述

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距:视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小透视的单位是像素
透视写在被观察元素的父盒子上面
d:就是视距，视距就是个距离人的眼睛到屏幕的距离
z:就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

6.4 透视 translateZ

<style>
    div{
        /* Z越大 看到的画面就越大 */
        transform: translateZ(100px);
    }
</style>

6.5 3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法

transform rotateX(45deg）:沿着x轴正方向旋转45度
transform rotateY(45deg）:沿着y轴正方向旋转45deg
transform rotate3d(45deg）:沿着Z轴正方向旋转45deg
transform rotate3d（x， y， z， deg）:沿着自定义轴旋转deg为角度（了解即可）
对于元素旋转的方向的判断我们需要先学习一个左手准则。
左手准则：
左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿看x轴旋转的方向
左手准则：
左手的手拇指指向y轴的正方向
其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值)

在这里插入图片描述

6.6 3D呈现 transfrom-style

控制子元素是否开启三维立体环境。
transform-style:flat子元素不开启3d立体空间默认的
transform- style: preserve-3d;子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用

四、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须忝加。

1、私有前缀

-moz-:代表 firefox浏览器私有属性
-ms-:代表ie浏览器私有属性
webkit-:代表 safari、 chrome私有属性
o-:代表 Opera私有属性
2、提倡的写法（完美的写法）
-moz-border-radius: 10px；
-webkit-border -radius: 10px；
-o-border-radius: 10px;
-border-radius: 10px；

五、总结

CSS3

1.CSS3新增加的属性选择器、结构伪类、伪元素选择器
2.CSS32D移动transtale、旋转rotate和缩放scale属性
3.CSS3动画设置方法（animation）
4.CSS33D移动、旋转和缩放属性
5浏览器私有前缀

豆沙包(干饭王)

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css3提特性提高动画2D 3D效果笔记

一、2D转换 (transform) 是CSS3中具有颠覆的特征之一，可以实现元素的位移、旋转、缩放等效果。移动: translate旋转: rotate缩放: scale1、转换之移动 translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。1.1、语法transform: translate（x，y）;或者分开写transform: translateX（n）transform: translateY（h）1.2、重点定义
复制链接

扫一扫