zoukankan      html  css  js  c++  java
  • CSS学习笔记-过渡模块

    过渡模块:
        1、过渡三要素
            1.1必须要有属性发生变化
            1.2必须告诉系统哪个属性需要执行过渡效果
            1.3必须告诉系统过渡效果持续时长
        2、格式:
            div{
                100px;
                height:100px;
                background-color:red;
                
                transition-property:width;
                transition-duration:0.5s;
            }
            
            div:hover{
                300px;
            }
            (:link默认/:visited访问后/:hover鼠标悬浮/:active长按)    爱恨原则:【L】o【v】e    【H】【a】te

        3、注意点:
            当多个属性需要同时执行过渡效果时,用逗号隔开即可:    
                transition-property:width,background-color;
                transition-duration:5s,5s;
        
    过度模块其他属性:
        1、transition-dalay:2s;
            告诉系统延迟多少秒之后才开始过渡   
        2、transition-timing-funtion:linear;
            取值:linear/ease/ease-in/ease-out/ease-in-out

       过渡曲线 


    过渡模块_连写:
        1、连写格式:
            transition:过渡属性 过渡时长 运动速度 延迟时间;
        2、过渡连写注意点:
            2.1如果想给多个属性添加过渡效果,用逗号隔开即可,如:
                transition:width 1s linear 0s,background-color 1s linear 0s;
            2.2连写的时候可以省略后面的两个参数,保证前面的三要素即可,如:
                transition:width 1s,background-color 1s;
            2.3如果多个属性运动的速度/延迟的时间/持续时间都一样,可以简写为:
                transition:all 0s;

  • 相关阅读:
    Linux内核学习第五周 系统调用
    Linux内核学习第三周 Linux启动过程分析
    WebStorm快捷键大全
    PAT乙级-1056. 组合数的和(15)
    PAT乙级-1043. 输出PATest(20)
    PAT乙级-1021.个位数统计(15)
    PAT乙级-1036.跟奥巴马一起编程(15)
    学习笔记-C++ STL iterator与对指针的理解-20170618
    学习笔记-Little Tips_day20170615-" " and ' '
    HTML5离线存储和本地缓存
  • 原文地址:https://www.cnblogs.com/AsVR-Sharemju/p/11983145.html
Copyright © 2011-2022 走看看