zoukankan      html  css  js  c++  java
  • CSS设置过渡

    p{
    width: 300px;
    height: 300px;
    background-color: yellow;
    
    }
    p:hover{                                   hover是鼠标悬停的意思。
    width: 400px;
    height: 400px;
    background-color: red;

    4个子属性

    transition有4个子属性:transition-property,transition-duration,transition-timing-function,transition-delay

    transition-property指定需要过渡的CSS属性。并不是所有属性都能过渡的,只有能数字量化的CSS属性才能过渡。哪些属于能数字量化的CSS属性呢?例如:

    颜色系,如color,background-color,border-color,outline-color

    数字系,实在太多了,如width,height,top,right,bottom,left,zoom,opacity,line-height,background-position,word-spacing,font-weight,vertical-align,outline-outset,z-index等。

    ---------------------

    transition:                             简写下面四中属性的方式 。

    可以单独指定这4个子属性,也可以像background等属性一样,合并在transition属性里指定。但合并时要注意,因为有transition-duration和transition-delay都是时间,浏览器会根据先后顺序,将第一个时间认作为transition-duration,第二个时间认作为transition-delay。

    是分开或者合并指定并无标准答案。分开指定可能代码易读性高一点。但当页面需要适应各浏览器时,每个都要加上-ms-,-moz-等前缀,代码会变的很多,合并在一起代码稍微少点。另外也可以同时指定多个过渡效果,例如transition: background 1s linear 2s, border-radius 2s ease-in 3s;

    -----------------------------

    transition-delay:1s;               从什么时间开始过渡。这里是从一秒后开始的

    transition-duration:2s;          过渡花费的时间。用这个就出现过度效果了。贼特么科幻。

    transition-property:width;     规定某个属性的过渡。这个是只过渡宽度 其他的不过度。

    transition-timing-function:    下面有四种贝塞尔活动

    #div1 {transition-timing-function: linear;}                                          默认的平滑
    #div2 {transition-timing-function: ease;}                                           先快再慢
    #div3 {transition-timing-function: ease-in;}                                      理解成又慢变快
    #div4 {transition-timing-function: ease-out;}                                     先快后慢
    #div5 {transition-timing-function: ease-in-out;}                                 慢快慢

    -------------------------------------------------------------------------

    -moz-transition:     支持火狐浏览器更早的版本

    -webkit-transition:   支持谷歌和IE浏览器更早版本

    -o-transiton             支持 OPERA浏览器更早的版本

  • 相关阅读:
    hihoCoder #1176 : 欧拉路·一 (简单)
    228 Summary Ranges 汇总区间
    227 Basic Calculator II 基本计算器II
    226 Invert Binary Tree 翻转二叉树
    225 Implement Stack using Queues 队列实现栈
    224 Basic Calculator 基本计算器
    223 Rectangle Area 矩形面积
    222 Count Complete Tree Nodes 完全二叉树的节点个数
    221 Maximal Square 最大正方形
    220 Contains Duplicate III 存在重复 III
  • 原文地址:https://www.cnblogs.com/lovesoda/p/9442294.html
Copyright © 2011-2022 走看看