zoukankan      html  css  js  c++  java
  • CSS3学习手记(10) 过渡

     

    CSS3过渡

    • 允许css的属性值在一定的时间内平滑地过渡
    • 在鼠标单击、获取焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值

    transition

    transition-property属性检索或设置对象中的参与过渡的属性   

    语法

    transition-property:none|all|property

    参数说明

    • none 没有属性改变
    • all 默认值
    • property 元素属性名
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
          body{background: #abcdef}
          div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background}
          div:hover{cursor: pointer;background: red;transition-property:background }
            </style>    
        </head>
        <body>
        <div></div>
        </body>
    </html>

    鼠标经过方块变红,离开后恢复正常

    transition-duration属性检索设置对象过渡的持续时间

    语法

    transition-duration:time;

    参数说明

    • 规定完成过渡效果需要花费的时间(以秒或毫秒计)
    • 默认值是0
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
          body{background: #abcdef}
          div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s}
          div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s }
            </style>    
        </head>
        <body>
        <div></div>
        </body>
    </html>

    transition-timing-function 检索或设置对象中过渡的动画类型

    • linear 线性过渡
    • ease  平滑过渡
    • ease-in 由慢到快
    • ease-out 由快到慢
    • ease-in-out 由慢到快在到慢
    • step-start 
    • step-end  

    transition-delay属性检索或设置对象延迟过渡的时间

    语法 transition-delay:time

    参数说明

    • 指定秒或毫秒之前要等待切换效果开始
    • 默认值 0
  • 相关阅读:
    android 单位详解
    ViewFlipper的使用
    today is history,today is tomorrow
    Android2.1 和之后的版本 中的 drawable(hdpi,ldpi,mdpi) 的区别
    auto_ptr
    android编写Service入门
    Android程序完全退出的三种方法
    Android中Toast的用法简介
    安装android开发环境
    error C2850: 'PCH header file'
  • 原文地址:https://www.cnblogs.com/zry2510/p/7084811.html
Copyright © 2011-2022 走看看