css3過渡採用什麼屬性

青灯夜游
發布: 2022-01-13 15:46:56
原創
4730 人瀏覽過

css3過渡採用的屬性有:1、transition;2、transition-property;3、transition-duration;4、transition-timing-function;5、transition-delay。

css3過渡採用什麼屬性

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

要實現這一點,必須規定兩個項目:

  • 指定要新增效果的CSS屬性

  • 指定效果的持續時間。

透過過渡transition屬性,可以讓web前端開發人員不需要javascript就可以實現簡單的動畫互動效果,要實現這一點,必須實現一項內容,即指定效果的持續時間。

css3過渡屬性

##CSStransition簡寫屬性,用於在一個屬性中設定四個過渡屬性。 3transition-property#規定應用過渡的 CSS 屬性的名稱。 3transition-duration#定義過渡效果所花費的時間。預設是 0。 3transition-timing-function規定過渡效果的時間曲線。預設是 "ease"。 3transition-delay規定過渡效果何時開始。預設是 0。 3

複合屬性

過渡transition的這四個子屬性只有是必要值且不能為0。其中,都是時間。當兩個時間同時出現時,第一個是,第二個是;當只有一個時間時,它是,而為預設值0

transition: <transition-property> || <transition-duration> || 
<transition-timing-function> || <transition-delay></transition-delay></transition-timing-function></transition-duration></transition-property>
登入後複製

[注意]transition的這四個子屬性之間不能用逗號隔開,只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支援多值,多值部分稍後介紹);而空格隔開的代表不同屬性的四個關於過渡的子屬性。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 2s;/*代表持续时间为2s,延迟时间为默认值0 */
            /* transition: 1s 2s; 代表持续时间为1s,延迟时间为2s */
        }
        .test:hover {
            width: 300px;
        }
登入後複製
    <div class="test"></div>
登入後複製

css3過渡採用什麼屬性

相關子屬性

1、transition-property

#transition-property屬性指定CSS屬性的nametransition效果(transition效果時將會啟動指定的CSS屬性的變更)。 none: 沒有指定任何樣式,all: 預設值,表示指定元素所有支援transition-property屬性的樣式。 : 可轉換的樣式,可用逗號分開寫多個樣式。

注意:始終指定 transition-duration屬性,否則持續時間為0,transition不會有任何效果。

1)、可過渡的樣式

不是所有的CSS樣式值都可以過渡,只有具有中間值的屬性才具備過渡效果,具體如下

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
登入後複製
        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background-color: lightblue;
            transition: width 2s, background-color 2s ease 0.5s;
            /*代表width持续时间为2s,延迟时间为默认值0;
              background-color持续时间2s 延迟0.5s */
        }

        .test:hover {
            width: 300px;
            background-color: indianred;
        }
登入後複製

效果圖:

css3過渡採用什麼屬性

2、transition-duration

#transition-duration屬性規定完成過渡效果需要花費的時間(以秒或毫秒計)。預設值:0s。

[注意]該屬性不能為負值 。

[注意]若該屬性為0s則為預設值,若為0則為無效值。所以必須帶單位 。

[注意]該值為單值時,即所有過渡屬性都對應相同時間;該值為多值時,過渡屬性按照順序對應持續時間 。

3、transition-timing-function

transition-timing-function屬性指定切換效果的速度。它可以取一下幾個值。預設值:ease 。

#屬性 描述
描述
#linear規定以相同速度開始至結束的過渡效果,即勻速。 (等於 cubic-bezier(0,0,1,1))。
ease規定慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。
ease-out規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。
ease-in-out規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

4、transition-delay

transition-delay属性指定何时将开始切换效果,值是指以秒为单位(S)或毫秒(ms)。默认值:0s。

[注意]该属性若为负值,无延迟效果,但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0,则无过渡效果;若该设定值大于0,则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。

[注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。

过渡阶段

  • 过渡开始时间=样式改变的时刻+过渡延迟时间;而过渡结束时间=过渡开始时间+过渡持续时间。

  • 过渡起始值=过渡前的过渡属性值;而过渡结束值=过渡完成后的过渡属性值 。

  • 过渡分为两个阶段:前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段,则反向阶段的初始值是前进阶段结束时的瞬时值

  • 以hover为例,若在元素非hover态时设置transition,相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition,则前进状态以hover态设置的为准,而反向状态以非hover态设置的为准 。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 3s;/* 设置反向状态 */
        }
        .test:hover {
            width: 300px;
            transition: 100ms;
        }
登入後複製

效果:

css3過渡採用什麼屬性

触发方式

一般地,过渡transition的触发有三种方式,分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。

  • hover : 鼠标悬停触发 。

  • active : 用户单击元素并按住鼠标时触发 。

  • focus : 获得焦点时触发。

  • @media触发 : 符合媒体查询条件时触发 。

/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}
登入後複製

(学习视频分享:css视频教程

以上是css3過渡採用什麼屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板