CSS3新属性—2D维度以及过渡

最新推荐文章于 2022-04-15 23:20:32 发布

BeterJane

最新推荐文章于 2022-04-15 23:20:32 发布

阅读量1.9k

点赞数

文章标签： css3 动画 2d 移动 3d

本文链接：https://blog.csdn.net/u012369271/article/details/53607675

版权

CSS3新增的一些2D、3D以及动画模块等可以帮助我们轻松完成一些有趣的小动画，在一定程度上可以代替javascript完成某些动态效果。它和普通的css用法一样由属性和属性值组成，属性为transform，但这里的属性值是放在方法中使用，所以具体格式为 transform:方法名（属性值1，属性值2），这些慢慢后面就知道怎么用了

一.C3之2D维度

可以先来了解以下2D可以做哪些效果：

1、translate(水平位移值，垂直位移值) 方法，我们可以理解为位移，即元素在一个平面内随意移动(类似margin)，代码如下，那么此时的效果和只写被我注释掉的两行代码效果完全一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            /*margin-left: 400px;*/
            /*margin-top: 200px;*/

             transform: translate(400px,200px);

 } </style>
</head>
<body>
     <img src="img/za5.png" alt="">
</body>
</html>

运行结果图如下：即我的img默认在浏览器左上角，但是用位移方法之后水平位置向右挪动了400像素，垂直挪动了200像素

2、第二个方法，rotate(x deg) 我们理解为旋转，即在浏览器这个平面内顺时针旋转x角度，deg为角度单位。代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{            

             transform: rotate(45deg);

 } </style>
</head>
<body> 
        <img src="img/za5.png" alt="">
</body>
</html>

那么运行结果如下图：因为没有设置任何位移，所以图片还是在我的浏览器的默认位置左上角，但是我给它设置了旋转。

3、接下来第三个方法，scale(水平伸缩倍数,垂直伸缩倍数) 我们称之为伸缩，即把一个元素在这个平面内扩大或缩小为原本的多少倍，如果方法内只写一个值，那么水平垂直都伸缩为相同倍数。
代码如下：即我给这张图片水平拉伸为原来的1.5倍，垂直方向不变（是1倍）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{           

           transform: scale(1.5,1);

 } </style>
</head>
<body> 
         <img src="img/za5.png" alt="">
</body>
</html>

运行结果图如下：这张图的位置不变，只被水平拉长了。

二.C3过渡

好啦，通过以上简单的了解，我们可能发现没有什么神奇的，无非就是在平面内平移旋转拉伸，而且它还是一个静态的效果，因为我们只给它设置了最终状态。但是！！我们接下来要通过C3的过渡来让它好玩一点，通过它们两个的配合就可以动起来，记住一定要配合。即transform2D要配合的就是过渡transition。我们以上面的第一个效果，位移translate为例，当鼠标悬停在这张小汽车图片上时，让它动起来。看下面的代码：我们先不给小图片像上面第一个例子那样设置初始位移，而是给它一个触发，即hover鼠标悬停之后让它水平位移400像素，那么这时的效果是：这张图片的位置由初始的默认位置左上角，被鼠标悬停后向右位移400像素，这张图片虽然动起来了，但是画面过于生硬，因为它的位置是突变的，我们只能看到它初始和最终的位置，中间过程却看不到，那么这时就应用到c3的过渡，transition属性。看下面代码部分，这是过渡最常用也是最重要的两个属性即transition-property和transition-duration，没有特殊需求只写这两个属性即可。先介绍一下这两个属性1.需要过渡的 CSS 属性的名称transition-property 2、过渡的时间transition-duration 。那么什么是过渡呢，当我们加上这两个属性时，鼠标悬停时这张图片表现出来的就是很柔和的从左移动至右，就像车真正开起来一样，而不再是生硬的从左边“突变”到右边，这就是过渡效果。初学时可能会分不清什么是需要过渡的css属性的名称（transition-property），其实它就是哪个属性要变化，就写哪个属性名称，如这个程序，要变化的是位移属性名即transform(注意不是translate，translate是方法而不是属性名)，当然一般情况下这里可以用all来代替属性名，这样就不必寻找具体要变的是哪个属性了，即写为transition-property：all，意思是这个标签的所有属性，只要有变化的就给它添加上过渡效果。transition还有很多其他属性常用的一共有四个，可以看下面代码部分有另外两个属性transition-delay和transition-timing-function及介绍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{           
            transition-property:transform ;/*需要过渡的 CSS 属性的名称（过渡三要素之2）*/
            transition-duration: 2s;/*过渡的时间，即位移过程总共两秒钟（过渡三要素之3）*/

          
            /*transition-delay: ns;*//*过渡延迟，单位s(秒)，即n秒钟后才开始运动，这里的效果是图片等待3秒后开始向右移动。*/           
            /*transition-timing-function: linear/ease/ease-in/ease-out/ease-in-out;*//*运动效果，类似我们高中物理学的运动加速度，默认不写的时候是linear,
             匀速直线运动的意思。ease是先慢后快再慢结束。剩下的感兴趣大家可以依次试一试就不一一介绍了。*/
            }


         img:hover{
            /*过渡三要素之1*/
             transform: translate(400px,0px);
             }
</style>
</head>
<body>
    <img src="img/za5.png" alt="">
</body>
</html>

属性一般都有连写格式，这里的连写格式是： transition: property过渡的属性名称 duration过渡时间 timing-function运动效果 delay延迟时间;
如 transition：all 5s ease 2s 意思是这个元素的所有属性运动在2s后开始以ease方式运动到停止，过程时间是5s。

简单总结一下，过渡有三要素：1、有属性要发生改变：如上面hover时位移变了（并且是变化的 最终值，这个例子变化后最终位置是个具体右下方的位置），也可以是旋转了或伸缩了、宽度变了、高度变了等等，并且一般都要有一个触发条件，这里是悬停。

2、告知哪个属性发生过渡，即需要过渡的名称transition-property，不再多说。

3、告知过渡的时间即transition-duration。

三要素即把 transform2d变化和transition过渡配合起来完成一定效果，大家可以去试试辣。