zoukankan      html  css  js  c++  java
  • css3的transition属性的使用

    transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.
    这个属性一般搭配:hover来使

    下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是linear

    1 div{ background-color:red; transition:background-color 1s linear 0.2s;}
    2 div:hover{ background-color:yellow;}
    <div>思思博士</div>

    鼠标没放上去之前:

    鼠标放上去0.2s后 的变化过程:

    鼠标放上去的最终效果:

    看到这里 大家对与这个属性的用法,心里面应该有了底了.

    对于这个属性,每个参数都有一个对应的属性名,也就是说这个属性是可以拆开写的.

    非简写形式:

    1 /*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/
    2 div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}
    3 div:hover{ background-color:yellow;}

    transition还可以过渡多个效果.

    1 div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;}
    2 
    3 div:hover{ background-color:yellow; color:#F00; height:100px;}
  • 相关阅读:
    alpha冲刺9
    alpha冲刺8
    alpha冲刺7
    alpha冲刺6
    团队作业——随堂小测(同学录)
    alpha冲刺5
    【麻瓜制造者】团队项目测试报告与用户反馈
    Android基础学习
    学习博客之工具的学习、安装和使用
    学习博客之Java继承多态接口
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/3898711.html
Copyright © 2011-2022 走看看