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

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;
}

此时得到的基本结果为：

下面将进行对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*/
}

可以看到下面的盒子相对于原来分别向右向下移动了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*/
}

可以看到下面的盒子旋转了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*/
}

可以看到改变后的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*/
}

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*/
}

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*/
}

可以看到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{}设置当鼠标放置在元素上并过渡后的元素大小以及旋转的度数。

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

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}
}

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

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

猜你喜欢