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

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-propertytransition-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过渡配合起来完成一定效果,大家可以去试试辣。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值