CSS3中动画变换

来源：互联网发布：徐州华道数据地址编辑：程序博客网时间：2024/05/16 08:30

2D动画

在CSS中提供了transform和transform-origin两个用于实现2D变换的属性。其中transform属性用于实现平移、缩放、旋转和倾斜等2D变换，而transform-origin属性则用于设置变换的中心点。

translate函数

利用translate函数可以实现2D平移。

基本语法：
` -webkit-transform: -webkit-transform: translate(100px,200px);
-moz-transform: translate(100px,200px);
-ms-transform: translate(100px,200px);
-o-transform:translate(100px,200px);
transform: translate(100px,200px);/（水平偏移垂直偏移）/
效果如下：
这里写图片描述
也可实现在X轴或Y轴单方向的平移，语法如下：

transform:translateX(200px);/*水平偏移*/transform:translateY(200px);/*垂直偏移*/

效果如下：
水平偏移

垂直偏移

其参数值可正可负，X轴为正值是代表向右移动，为负值是代表向左移动；Y轴为正值是代表向下移动，为负值是代表向上移动。

rotate函数

rotate函数可以实现2D旋转。

基本语法：
-webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg);/*旋转:(angle)*/
效果如下：
这里写图片描述

参数angle值可正可负，正值代表顺时针旋转，负值代表逆时针旋转。在使用该函数之前，可以应用transform-origin属性定义变换的中心点。

scale函数

scale函数可以实现2D缩放。

基本语法：`-webkit-transform: scale(2,4);/（水平发大倍数，垂直放大倍数）/
-moz-transform: scale(2,4);
-ms-transform: scale(2,4);
-o-transform: scale(2,4);
transform: scale(2,4);/缩放：0-1 缩小；大于1 放大/
效果如下：
这里写图片描述

如果只指定一个参数，那么在X轴和Y轴都缩放参数所指定的比例，语法如下；
-webkit-transform: scale(2);/水平垂直都放大相同倍数，可只写一值/`
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
缩放：0-1 缩小；大于1 放大；负数反转；为1 不缩放
效果如下：
这里写图片描述

skew函数

skew函数可以实现2D倾斜。

基本语法：
`-webkit-transform: skew(40deg,20deg);
-moz-transform: skew(40deg,20deg);
-ms-transform: skew(40deg,20deg);
-o-transform: skew(40deg,20deg);
transform: skew(40deg,20deg);/倾斜：（水平倾斜角度，垂直倾斜角度）/
效果如下：

这里写图片描述

也可实现在X轴或Y轴单方向的倾斜，语法如下：

 transform:skewX(20deg);/*水平倾斜*/transform:skewY(20deg);/*垂直倾斜*/

效果如下：
水平倾斜

垂直倾斜

transform-origin属性

transform-origin属性可以更改变换的中心点
常用基本语法：
transform-origin:right bottom;/*以右下点为中心点*/ transform-origin:80% 50%;/*指定某个点为中心点*/

过渡效果

transition属性

transition可以控制HTML元素的某个属性发生改变时经历的时间，并且以平滑渐变的方式发生改变，从而形成动画效果。
基本语法：

transition:property duration timing-function delay;/*过渡属性 过渡持续时间 过渡类型 延迟过渡时间*/

其中过渡类型有以下几种：

linear 线性过渡，即匀速过渡。
ease 平滑过渡，过渡的速度会逐渐慢下来。
ease-in 由慢到快，即逐渐加速。
ease-out 由快到慢，即逐渐减速
ease-in-out 由慢到快再到慢，即先加速后减速。
cubic-bezier(x1,y1,x2,y2) 特定的赛贝尔曲线类型

3D变换

transform:rotateX/rotateY(angle);可实现3D变换。
下面举个栗子：
部分代码如下：

 <style>        div{            height:100px;            width:100px;            background: #ffc2a8;            transition:.5s;/*默认以0.5s的速度匀速变换*/        }        div:hover{            width:400px;            background:yellow;            transform: rotateX(180deg);/*3D动画效果*/        }    </style></head><body><div>hello</div></body>

自定义动画

keyframe为自定义动画，其有连个步骤：

创建一个动画
调用该动画

下面我们来说如何创建动画，格式如下：

@keyframes abc{ from{ background:yellow;} to{ background: blue; } }

2.@keyframes abc{ 0%{ background:yellow; border-radius:50%;} 25%{ background:lightpink; transform:translate(400px,0); border-radius:50%;} 50%{ background:palegreen; transform:translate(400px,400px); border-radius:50%;} 75%{ background:firebrick; transform:translate(0px,400px); border-radius:50%;} 100%{ background: blueviolet; transform:translate(0,0); border-radius:50%;} }
那么我们完成了自定义动画，怎么来调用它呢？这时我们就需要用到animation了，我们可以在style中写：

div:hover{animation:abc 1s linear};/*abc为上面自定义动画的名字*/

下面做了两个小效果(^__^) ,部分代码如下：

<head>    <style>        *{            margin:0;            padding:0;            box-sizing: border-box;        }        .box{            height:250px;            width:346px;            margin:300px auto 0;            position: relative;            overflow: hidden;        }        .box img{              transition:0.5s;          }        .box:hover img{            transform:scale(1.2);        }        .box .title{            height:250px;            width:346px;            background:rgba(255,255,255,.3);            position: absolute;            right: 0;            top:0;            transition: 0.5s;            padding:20px;            transform-origin: right bottom;            transform:rotate(90deg);        }        .box:hover .title{            transform: rotate(0deg);        }    </style></head><body><div class="box">    <img src="img-1.jpg" alt=""/>    <div class="title">        <p>title1            <br>            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda commodi consectetur dolor doloremque doloribus dolorum, ea enim harum iste molestias natus odit officia quo, recusandae repellat suscipit, ullam ut!        </p>    </div></div></body>

<head>    <style>        *{            margin:0;            padding:0;            box-sizing: border-box;        }        .box{            height:250px;            width:346px;            margin:300px auto 0;            position: relative;            overflow: hidden;        }        .box img{            transition:0.5s;        }        .box:hover img{            transform:scale(1.2);        }         .box .title{            height:250px;            width:346px;            background:rgba(255,255,255,.3);            position: absolute;            left: -346px;            top:0;            transition: 0.5s;            padding:20px;        }        .box:hover .title{            transform: translateX(346px);        }    </style></head><body><div class="box">    <img src="img-1.jpg" alt=""/>    <div class="title">        <p>title1            <br>            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda commodi consectetur dolor doloremque doloribus dolorum, ea enim harum iste molestias natus odit officia quo, recusandae repellat suscipit, ullam ut!        </p>    </div></div></body>

阅读全文

0 0