成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

花式使用CSS3 transition

DobbyKim / 2075人閱讀

摘要：歡迎交換友鏈進(jìn)擊的程序媛微博江小湖本文講介紹控制六種方法觸發(fā)，以及事件的使用。事件事件會(huì)在結(jié)束后觸發(fā)。有沒有漸變開始的事件目前只有有事件，目前未有此標(biāo)準(zhǔn)。

歡迎交換友鏈 Laker"s Blog--進(jìn)擊的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

本文講介紹:hover、:active、:focus、:checked、Media Queries、JavaScript控制六種方法觸發(fā)CSS3 transition，以及 transitionend 事件的使用。

:hover

最常見的是用hover：

:hover


.hover {
  width: 100px;
  height: 100px;
  background: #222;
  color: white;
  text-align: center;
  transition: all 2s ease;
}
.hover:hover {
  width: 200px;
  height: 200px;
}

Demo

:active

mousedown s時(shí)觸發(fā)：

:active


.active {
  width: 100px;
  height: 100px;
  background: #222;
  color: white;
  text-align: center;
  transition: all 2s ease;
}
.active:active {
  width: 200px;
  height: 200px;
}

Demo

:focus

文本框聚焦時(shí)（這個(gè)在很多網(wǎng)站的搜索框的動(dòng)畫效果里用到）：


  




  



.focus input, .focus textarea {
  width: 200px;
  transition: width 1s ease;
}

.focus input:focus, .focus textarea:focus {
  width: 300px;
}

Demo

:checked

用于checkboxes 和 radio buttons 被選中時(shí)：


     Input 1

     Input 2

     Input 3

   Input 4



    
input[type="checkbox"]:checked {
  height: 20px;
  transition: all 1s ease;
}

input[type="checkbox"]:checked {
  width: 30px;
}

Demo

Media Queries

改變?yōu)g覽器窗口大小時(shí)觸發(fā)：

media


.media {
  width: 200px;
  height: 200px;
  background: #222;
  color: white;
  text-align: center;
  transition: width 1s ease;
}

@media only screen and (max-width : 960px) {
  .media {
    width: 100px;
    height: 100px;
  }
}

Demo

JavaScript事件觸發(fā)CSS3 transition

通過 JavaScript 或者 jQuery 添加、刪除class來完成動(dòng)畫，CSS格式類似:hover。

例如：

以 click 事件為例，當(dāng)點(diǎn)擊方塊時(shí)，變化長(zhǎng)寬、背景色：

HTML:

CSS:

.box {
  width: 200px;
  height: 200px;
    background: black;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.box.clicked {
  width: 300px;
  height: 300px;
    background: blue;
}

JavaScript：

$(".box").click(function() {
    $(this).toggleClass("clicked");
});

Demo

如果用原生JavaScript，可以自己寫個(gè)添加和刪除類的函數(shù)。

transitionend 事件

transitionend 事件會(huì)在 CSS transition 結(jié)束后觸發(fā)。兼容Chrome、Firefox、Safari、IE10+：

element.addEventListener("transitionend", callback, false);

為保證低版本兼容性可以寫webkitTransitionEnd（WebKit ）、otransitionend（Opera）、MSTransitionEnd（IE 10+）、transitionend（Mozilla）。詳見此討論。

有沒有漸變開始的事件？目前只有IE 10+ 有 transionstart 事件，W3C目前未有此標(biāo)準(zhǔn)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78368.html

相關(guān)文章

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評(píng)論0 收藏0

  • 如何看源碼之Ruby China搜索框動(dòng)畫實(shí)現(xiàn)

    摘要：歡迎交換友鏈進(jìn)擊的程序媛微博江小湖不要臉的自戀一下我覺得我看源碼的能力越來越強(qiáng)了，想看到搜索框動(dòng)畫效果很不錯(cuò)，想試著實(shí)現(xiàn)一下。例如只做了輸入框的顯示隱藏。但是看源碼沒有設(shè)置，有兩個(gè)屬性引起我的注意和，可以猜測(cè)這個(gè)動(dòng)畫的實(shí)現(xiàn)由實(shí)現(xiàn)的漸變。 歡迎交換友鏈 Lakers Blog--進(jìn)擊的程序媛Github：https://github.com/younglaker微博: 江小湖Laker ...

    cnsworder 評(píng)論0 收藏0

  • 如何看源碼之Ruby China搜索框動(dòng)畫實(shí)現(xiàn)

    摘要：歡迎交換友鏈進(jìn)擊的程序媛微博江小湖不要臉的自戀一下我覺得我看源碼的能力越來越強(qiáng)了，想看到搜索框動(dòng)畫效果很不錯(cuò)，想試著實(shí)現(xiàn)一下。例如只做了輸入框的顯示隱藏。但是看源碼沒有設(shè)置，有兩個(gè)屬性引起我的注意和，可以猜測(cè)這個(gè)動(dòng)畫的實(shí)現(xiàn)由實(shí)現(xiàn)的漸變。 歡迎交換友鏈 Lakers Blog--進(jìn)擊的程序媛Github：https://github.com/younglaker微博: 江小湖Laker ...

    plus2047 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

  • 前端面試之CSS3新特性

    摘要：和這三個(gè)特性是新增的和動(dòng)畫相關(guān)的特性。使用方式如下和變換類型可以有各種變換類型，即屬性值定義不進(jìn)行轉(zhuǎn)換。設(shè)置列之間的寬度樣式和顏色規(guī)則和和用戶界面中，新的用戶界面特性包括重設(shè)元素尺寸盒尺寸以及輪廓等。 除了html5的新特性，CSS3的新特性也是面試中經(jīng)常被問到的。 選擇器 CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。 element1~...

    glumes 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<