CSS3属性(过渡,2D变换,3D变换,动画)

CSS3属性(过渡,2D变换,3D变换,动画)

在CSS3中,我们如果不使用JS代码,或者flash动画,想要实现元素从A状态变成B状态,并且中间的过程可以被观察到,那么可以使用过渡属性:transitiont

transiton-timing-function:过渡运动曲线

ease : 由快到慢(默认值)
linear: 匀速运动
ease-in: 加速运动
ease-out: 减速运动
ease-in-out:先加速后减速

1.利用2D平移实现定位元素居中

div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    //先走父盒子的一半,再往回走自己的一半,即可实现居中
    //但是上面这种方法有一个问题,但元素的宽高发生了改变,那么对应的赋值数据也要改变,比较麻烦。
}

2.利用translate来实现不需要每次都改变代码的居中方式。

div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    //如果使用百分比作为单位,那么位移的距离则是以元素本身的宽高作为参照计算。
    //此时不管元素的宽高如何发生变化,百分之五十都是自身的一半,不需要做任何修改。
}

3.动画(animation)

使用animation动画属性,必须要声明动画,然后再由元素调用动画

//声明动画语法
@keyframes 动画名称 {
    from {
        //开始状态
    }

    to {
        //结束状态
    }
}

//假设元素div要调用动画
//调用动画语法
div {
    animation: 动画名称 动画时间 运动曲线 延迟时间 播放次数 是否反向 ;
}
属性描述
@keyframes定义动画
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的时间。
animation-timing-function规定动画的速度曲线。默认是 “ease”。
属animation-delay性规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。还有 infinite
animation-direction动画是否在下一周期逆向地播放。默认是 “normal”,alternate逆播放
nimation-play-state规定动画是否正在运行或暂停。默认是 “running”。还有“paused”
animation-fill-mode规定动画结束后状态,保持 forwards 回到起始 backwards
animation所有动画属性的简写属性

4.百分比设置多组动画

//除了上面的使用from以及to关键字来声明动画之外,还有一种方式,可以将动画分割为若干个节点。
@keyframes 动画名称 {
     0% {
         //开始节点
     }
     50% {
         //中间节点
     }
     100% {
         //结束节点
     }
 }
//调用动画的方式与之前相同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值