美文网首页
网络编程(六)之CSS3 2D/3D及动画

网络编程(六)之CSS3 2D/3D及动画

作者: blackmanba_084b | 来源:发表于2021-05-20 16:57 被阅读0次

下面仍然是跟着pink老师学习CSS3更高级的用法。

一、 CSS3 2D转换

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

  • 位移 transloate
  • 旋转 rotate
  • 缩放 scale
1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系


1.2 2D转换之移动 translate

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

transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
  • 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素
  • translate最大的优点:不会影响到其他元素的位置
  • translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
  • 对行内标签没有效果

下面是实例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 移动盒子的位置: 定位   盒子的外边距  2d转换移动 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            transform: translate(x, y); 
            transform: translate(100px, 100px); 
            /* 1. 我们如果只移动x坐标 */
            transform: translate(100px, 0); 
            transform: translateX(100px);
            /* 2. 我们如果只移动y坐标 */
            transform: translate(0, 100px);
            transform: translateY(100px);
        }
        
        div:first-child {
            transform: translate(30px, 30px);
        }
        
        div:last-child {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>
1.3 2D 转换之旋转 rotate
p::before {
            content: '';
            position: absolute;
            right: 20px;
            top: 10px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
}

实例代码如下所示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上,谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="media/pic.jpg" alt="">
</body>

</html>
1.4 2D转换中心点 transform-origin

我们可以设置元素转换的中心点

transform-origin: x y;
  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认转换的中心点是元素的中心点 (50% 50%)
  • 还可以给x y 设置 像素 或者 方位名词 (top bottom left right center)

代码实例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        /* 鼠标经过div  里面的三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
1.5 转换之缩放scale

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

transform:scale(x,y);
  • 注意其中的x和y用逗号分隔
  • transform:scale(1,1) :宽和高都放大一倍,相对于没有放大
  • transform:scale(2,2) :宽和高都放大了2倍
  • transform:scale(2) :只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
  • transform:scale(0.5,0.5):缩小
  • sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
    代码实例如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* transform-origin: left bottom; */
        }
        
        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度,我们有简单的写法  以下是 宽度修改了2倍,高度默认和第一个参数一样*/
            /* transform: scale(2); */
            /* 4. 我们可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点*/
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
    123123
</body>

</html>
1.6 2D 转换综合写法
1. 同时使用多个转换,其格式为:transform: translate() rotate() scale() ...等,
2. 其顺序会影转换的效果。(先旋转会改变坐标轴方向)

3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前

三、动画

动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

3.1 动画的基本使用

制作动画分为两步:
【1】 先定义动画
【2】再使用(调用)动画

<!--1. 用keyframes 定义动画(类似定义类选择器)-->
@keyframes 动画名称 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们想页面一打开,一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

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

【4】元素使用动画

div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* 调用动画 */
       animation-name: 动画名称;
       /* 持续时间 */
       animation-duration: 持续时间;
    }

【5】动画的常用属性


【6】动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

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

【7】速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是“ease”

四、 3D转换

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

4.1 三维坐标系

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

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


主要知识点:
* 3D位移: translate3d(x,y,z)
* 3D旋转: rotate3d(x,y,z)
* 透视: perspective
* 3D呈现 transfrom-style

实例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px);
            transform: translateY(100px); */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1. translateZ 沿着Z轴移动 */
            /* 2. translateZ 后面的单位我们一般跟px */
            /* 3. translateZ(100px) 向外移动100px (向我们的眼睛来移动的) */
            /* 4. 3D移动有简写的方法 */
            /* transform: translate3d(x,y,z); */
            /* transform: translate3d(100px, 100px, 100px); */
            /* 5. xyz是不能省略的,如果没有就写0 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
4.2 3D移动 translate3d
  • 3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
  • translform:translateX(100px):仅仅是在x轴上移动
  • translform:translateY(100px):仅仅是在Y轴上移动
  • translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
  • transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离

因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动

4.3 透视 perspective (下图中的d)

实例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform: translateZ(0);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>
4.4 translateZ

translform:translateZ(100px):仅仅是在Z轴上移动。有了透视,就能看到translateZ 引起的变化了

  • translateZ:近大远小
  • translateZ:往外是正值
  • translateZ:往里是负值
    实例如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform: translateZ(0);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>
4.5 3D旋转 rotate3d

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

  • transform:rotateX(45deg):沿着x轴正方向旋转 45度
  • transform:rotateY(45deg) :沿着y轴正方向旋转 45deg
  • transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
  • transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)
    实例代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 300px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            /* transform: rotateZ(180deg); */
            /* transform: rotate3d(x,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>
4.6 3D旋转 rotate3d

对于元素旋转的方向的判断 我们需要先学习一个左手准则。

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

五、 浏览器私有前缀

5.1 私有前缀
  • -moz-:代表 firefox 浏览器私有属性
  • -ms-:代表 ie 浏览器私有属性
  • -webkit-:代表 safari、chrome 私有属性
  • -o-:代表 Opera 私有属性
5.2 提倡的写法
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

相关文章

  • CSS3动画

    CSS3之2D/3D动画 2D的变换3D的变换动画 2D动画的变换 基本说明 注意:一般要写不同浏览器的适配 移动...

  • css动画

    css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...

  • 网络编程(六)之CSS3 2D/3D及动画

    下面仍然是跟着pink老师学习CSS3更高级的用法。 一、 CSS3 2D转换 转换(transform)是CSS...

  • 6_动画_其他属性

    2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...

  • 2019-06-11

    CSS3 2d变换 3d变换 css3 2d变换 111111 222222

  • CSS(二)

    css3动画 2D,3D转换方法 translate()向x,y轴移动 rotate()旋转180度 scale(...

  • 2018-08-15

    国产动画之2D与3D之争 国产3D动画是如何反超2D动画的 如果对国产动画有一定关注的观众们可能会注意到,当前最...

  • CSS3

    一、CSS3 css:层叠样式表。 css3的组成模块:选择器盒模型背景和边框文字特效2D/3D转换动画多列布局用...

  • UIView 常见翻转动画

    2D动画 Y轴3D翻转 水平2D 旋转

  • 【一起来烧脑】一步学会CSS3体系

    CSS3 完全向后兼容 选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面 box-s...

网友评论

      本文标题:网络编程(六)之CSS3 2D/3D及动画

      本文链接:https://www.haomeiwen.com/subject/lerbjltx.html