css页面特效--2D、3D转换、过渡、动画

ゝ一纸荒年。 2022-05-25 03:58 295阅读 0赞

1、2D、3D转换

通过除css3转换，能够对元素进行移动、缩放、转位、拉长或伸缩等。转换是使元素改变形状、尺寸和位置的一种效果。可以使用2D、3D来转换元素。

2D转换方法：

translate()：移动

rotate()：旋转

scale()：缩放

skew()：倾斜

3D转换方法：

rotateX()

rotateY()

首先，创建HTML文件index.html，以便于进行css的演示

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div>初始效果</div>
    <br/>
    <div class="div2">改变后效果</div>
    </body>
    </html>

然后创建一个CSS样式表style.css，并对div设置基本样式（为节省地方，将数值设置较小）

div{
        width: 50px;
        height: 50px;
        background-color: red;
    }

此时得到的基本结果为：

![70][]

下面将进行对div2进行动画效果的设置

1.translate

.div2{
        transform: translate(50px,50px);
        -webkit-transform: translate(50px,50px);/*safari  chrome*/
        -ms-transform: translate(50px,50px);/*IE*/
        -o-transform: translate(50px,50px);/*opera*/
        -moz-transform: translate(50px,50px);/*Firefox*/
    }

![70 1][]

可以看到下面的盒子相对于原来分别向右向下移动了50px。最后四句是对于不同浏览器的适配进行的设置，注释中有写出对应的主流浏览器。

2.rotate（参数为旋转度数）

.div2{
        transform: rotate(120deg);
        -webkit-transform: rotate(120deg);/*safari  chrome*/
        -ms-transform: rotate(120deg);/*IE*/
        -o-transform: rotate(120deg);/*opera*/
        -moz-transform: rotate(120deg);/*Firefox*/
    }

![70 2][]

可以看到下面的盒子旋转了120度。

3.scale （参数为缩放倍数）

.div2{
        margin-top: 30px;
        transform: scale(1,2);
        -webkit-transform: scale(1,2);/*safari  chrome*/
        -ms-transform: scale(1,2);/*IE*/
        -o-transform: scale(1,2);/*opera*/
        -moz-transform: scale(1,2);/*Firefox*/
    }

![70 3][]

可以看到改变后的div2宽度不变，高度变为原来的二倍。

4.skew （参数是围绕X轴旋转的度数和围绕Y轴旋转的度数）

.div2{
        transform:skew(20deg, 20deg);
        -webkit-transform: skew(20deg, 20deg);/*safari  chrome*/
        -ms-transform: skew(20deg, 20deg);/*IE*/
        -o-transform: skew(20deg, 20deg);/*opera*/
        -moz-transform: skew(20deg, 20deg);/*Firefox*/
    }

![70 4][]

3D的转换效果

1.rotateX

.div2{
        transform:rotateX(50deg);
        -webkit-transform: rotateX(50deg);/*safari  chrome*/
        -ms-transform: rotateX(50deg);/*IE*/
        -o-transform:rotateX(50deg);/*opera*/
        -moz-transform: rotateX(5deg);/*Firefox*/
    }

![70 5][]

2.rotateY

.div2{
        transform:rotateY(50deg);
        -webkit-transform: rotateY(50deg);/*safari  chrome*/
        -ms-transform: rotateY(50deg);/*IE*/
        -o-transform:rotateY(50deg);/*opera*/
        -moz-transform: rotateY(50deg);/*Firefox*/
    }

![70 6][]

可以看到3D的转换效果rotateX和rotateY分别从横向和纵向实现了压缩。

2、过渡效果

通过css3可以给元素添加一些效果，css3过渡是元素从一种样式转换成另一种样式，主要包括动画效果的css以及动画执行的时间

属性：

transition：设置四个过渡属性

transition-property：过渡的名称

transition-duration：过渡效果花费的时间

transition-timing-function：过渡效果的时间曲线

transition-delay：过渡效果开始时间

创建一个新的index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过渡效果</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div>效果展示</div>
    </body>
    </html>

对div进行样式设置

div{        
        width: 50px;
        height: 50px;
        background-color: aqua;
        transition: width 2s, height 2s,-webkit-transform 2s;
        -webkit-transition: width 2s, height 2s,-webkit-transform 2s;/*safari  chrome*/
        -ms-transition: width 2s, height 2s,-webkit-transform 2s;/*IE*/
        -o-transition:width 2s, height 2s,-webkit-transform 2s;/*opera*/
        -moz-transition: width 2s, height 2s,-webkit-transform 2s;/*Firefox*/
    }
    div:hover{
        width: 100px;
        height: 100px;
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);/*safari  chrome*/
        -ms-transform: rotate(360deg);/*IE*/
        -o-transform:rotate(360deg);/*opera*/
        -moz-transform: rotate(360deg);/*Firefox*/
    }

div\{\}对变化之前的元素进行样式设定，并设定过渡属性（直接使用简便方式设置四个属性）

div:hover\{\}设置当鼠标放置在元素上并过渡后的元素大小以及旋转的度数。

![70 7][]

图中展示了元素在过渡过程中的一个状态，因为是动态效果不便于展示。

3、动画效果

通过css3也可以进行创建动画，css3的动画需要遵循@keyframes规则。主要要规定动画的时长和名称。

html文件body中同样只有一个div

对div样式设置为：

div{
        width: 50px;
        height: 50px;
        background-color: aqua;
        position: relative;
        animation: anim 5s;
        -webkit-animation: anim 5s;
    }
    @keyframes  anim{
        0%{background: aqua;left: 0px;top: 0px}
        25%{background: mediumvioletred;left: 100px;top: 0px}
        50%{background: blue;left: 100px;top: 100px}
        75%{background: chartreuse;left: 0px;top: 100px}
        100%{background: aqua;left: 0px;top: 0px}
    }
    @-webkit-keyframes  anim{
        0%{background: aqua;left: 0px;top: 0px}
        25%{background: mediumvioletred;left: 100px;top: 0px}
        50%{background: blue;left: 100px;top: 100px}
        75%{background: chartreuse;left: 0px;top: 100px}
        100%{background: aqua;left: 0px;top: 0px}
    }

结果为元素进行右左下上的动画移动。

[70]: /images/20220525/fed1b28c18b74b709f086e58d8e51189.png
[70 1]: /images/20220525/d62349fd0bf1465bb3bba95fc4ac4720.png
[70 2]: /images/20220525/cce36a045bd943b7826042558a028d32.png
[70 3]: /images/20220525/9e03245b2f7c409482b5ed2800515ac3.png
[70 4]: /images/20220525/698afe15177f4ef3813fc75086c1379e.png
[70 5]: /images/20220525/80b332cdfa644488acaa3942641b65d6.png
[70 6]: /images/20220525/ef727f247b344747b49b006e2125ec33.png
[70 7]: /images/20220525/257b3e26a4e842509a1228f0c5cb81da.png