CSS3: transition实例

基础理论

  • transition 有五个属性:
    • property : 属性 , 可以指定哪个CSS属性进行过渡,也能使用all全部属性生效
    • duration : 持续时间
    • timing-function: 过渡函数,有linear(匀速),ease-in(渐现),ease-out(渐隐) ,ease-in-out(渐显渐隐)等。。。
    • delay : 是延迟 ,就是开始执行前等待的时间
  • 综合写法:transition: <property> <duration> <timing-function> <delay>

直接上例子 , 代码自己新建一个html保存,在chrome下或者chromium内核浏览器预览即可。。。firefox也行

LiveDemo

代码块

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>transition Demo</title>
        <style> /* transition: <property> <duration> <timing-function> <delay>;*/ .demobox { position: relative; left: 25%; top:300px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #56A892; -webkit-transition: all 1s ease-in-out .5s; transition: all 1s ease-in-out .5s; } .demobox:hover { background-color: #fcc; width: 200px; height: 200px; border-radius: 10px; background-color: #2AA2E6; -webkit-transform: rotate(180deg) skew(-5deg,150deg) scale(.5); -ms-transform: rotate(180deg) skew(-5deg,150deg) scale(.5); transform: rotate(180deg) skew(-5deg,150deg) scale(.5); } .btn{ width:200px; height:50px; box-shadow: 2px 2px 2px rgba(38,55,64,.9); -webkit-transition: all 2s ease-in-out ; transition: all 2s ease-in-out ; } .btn:hover{ color:#F5F5F5; font-size:bolder; background: linear-gradient(-45deg, #36C783, #2A9DC8 ); box-shadow: 2px 2px 5px #ABABB4 inset; -webkit-transform: translateX(250px) translateY(100px) rotate(45deg); -ms-transform: translateX(250px) translateY(100px) rotate(45deg); transform: translateX(250px) translateY(100px) rotate(45deg); } </style>
    </head>
    <body>
        <p>盒子和按钮的多个属性一起动画.hover触发</p>
        <div class="demobox"></div>

        <button type="button" class="btn">啦啦啦德玛西亚</button>
    </body>
</html>

你可能感兴趣的:(css,css3,实例,transition)