zoukankan      html  css  js  c++  java

  • CSS之transition属性

    1.鼠标移动到div中背景颜色慢慢变化（1个属性的变化）


     

     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title></title>  
    5.     <style type="text/css">  
    6.         #block{  
    7.              400px;  
    8.             height: 400px;  
    9.             background: blue;  
    10.             margin: 0 auto;  
    11.             transition: background 3s;  
    12.         }  
    13.         #block:hover{  
    14.             background: red;  
    15.         }  
    16.     </style>  
    17. </head>  
    18. <body>  
    19. <div id="block"></div>  
    20. </body>  
    21. </html>  


    2.多个属性的变化

    transition:属性 时间，属性 时间

    3.过度模式

    transition:属性 时间 模式

    模式：

    ease:缓慢开始，缓慢结束

    linear:匀速

    ease-in:缓慢开始

    ease-out:缓慢结束

      ease-in-out：缓慢开始，缓慢结束（和ease稍有区别）
  • 相关阅读:
    Spring Boot第四弹，一文教你如何无感知切换日志框架？
    Spring Boot 第三弹，一文带你了解日志如何配置？
    UVa 1625
    UVa 11584
    UVa 11400
    UVa 12563
    UVa 116
    UVa 1347
    UVa 437
    UVa 1025
  • 原文地址：https://www.cnblogs.com/chaofei/p/7688934.html
Copyright © 2011-2022 走看看