zoukankan      html  css  js  c++  java
  • CSS3 transition属性详解

    CSS3 transition详解

      transition:[ transition-property ] [ transition-duration ] [ transition-timing-function ] [ transition-delay ]

      transition的取值介绍:

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

        [ transition-duration ]:检索或设置对象过渡的持续时间

        [ transition-timing-function ]:检索或设置对象中过渡的动画类型,主要有6个值如下:

    1. ease(逐渐变慢),默认值
    2. linear(匀速)
    3. ease-in(加速)
    4. ease-out(减速),跟ease的区别是,减速的变化程度不一样。
    5. ease-in-out(先加速,再减速)
    6. cubic-bezier,允许你自定义一个时间曲线,通过cubic-bezier(x1,y1,x2,y2),此属性值可以模拟以上5个状态,只要传入相应的x1,y1,x2,y2给cubic-bezier(x1,y1,x2,y2)。这4个值必须在[0,1]之间,否则无效。

        [ transition-delay ]:检索或设置对象延迟过渡的时间

        

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>CSS transition属性详解-CSS教程</title>
     6         <style>
     7             h1 {
     8                 font-size: 16px;
     9             }
    10             
    11             .test {
    12                 overflow: hidden;
    13                 width: 100%;
    14                 margin: 0;
    15                 padding: 0;
    16                 list-style: none;
    17             }
    18             
    19             .test li {
    20                 float: left;
    21                 width: 100px;
    22                 height: 100px;
    23                 margin: 0 5px;
    24                 border: 1px solid #ddd;
    25                 background-color: #eee;
    26                 text-align: center;
    27                 -moz-transition: background-color .5s ease-in;
    28                 -webkit-transition: background-color .5s ease-in;
    29                 -o-transition: background-color .5s ease-in;
    30                 -ms-transition: background-color .5s ease-in;
    31                 transition: all 2s ease-in 1s;
    32             }
    33             
    34             .test li:nth-child(1):hover {
    35                 background-color: #F0AD4E;
    36                 transform: rotate(360deg);
    37             }
    38             
    39             .test li:nth-child(2):hover {
    40                 background-color: #999;
    41             }
    42             
    43             .test li:nth-child(3):hover {
    44                 background-color: #630;
    45             }
    46             
    47             .test li:nth-child(4):hover {
    48                 background-color: #090;
    49             }
    50             
    51             .test li:nth-child(5):hover {
    52                 background-color: #f00;
    53             }
    54         </style>
    55     </head>
    56     <body>
    57         <h1>请将鼠标移动到下面的矩形上:</h1>
    58         <ul class="test">
    59             <li>transition背景色过渡</li>
    60             <li>transition背景色过渡</li>
    61             <li>transition背景色过渡</li>
    62             <li>transition背景色过渡</li>
    63             <li>transition背景色过渡</li>
    64         </ul>
    65     </body>
    66 </html>
  • 相关阅读:
    WordPress WooCommerce ‘hide-wc-extensions-message’参数跨站脚本漏洞
    WordPress WP-Realty插件‘listing_id’参数SQL注入漏洞
    WordPress Videowall插件‘page_id’参数跨站脚本漏洞
    MySQL备忘点(上)
    Print工具类
    用于图片缩放的工具类
    重载、重写、方法相同
    Try-Catch-Finally代码块中的return
    Fltiss项目的架构、包名的定义和类的划分
    优化版快速排序
  • 原文地址:https://www.cnblogs.com/firstflying/p/8966706.html
Copyright © 2011-2022 走看看