国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

送給CSS初學(xué)者的懸停過渡動(dòng)畫三部曲

jsliang / 1867人閱讀

摘要：最后，將動(dòng)畫函數(shù)選為。的表現(xiàn)狀態(tài)就是起止過程比較緩慢，中間過渡迅速。褪色效果首先，添加一個(gè)褪色的過渡。通過百分比的方式指定動(dòng)畫的進(jìn)度相對(duì)于初始位置右移。同時(shí)希望動(dòng)畫持續(xù)秒的時(shí)長，采用的動(dòng)畫效果。

CSS不一定要寫得多么復(fù)雜才能實(shí)現(xiàn)特殊效果。如下就是三個(gè)超級(jí)簡單的過渡的例子，可能只是幾行代碼，但是添加到Web應(yīng)用程序中，卻會(huì)讓它增色不少。

如下是我們將在本教程中構(gòu)建的代碼

項(xiàng)目設(shè)置

在這個(gè)項(xiàng)目中，我們將把過渡效果應(yīng)用到一個(gè)class為box的元素上面。這個(gè)box元素內(nèi)部是垂直和水平居中的文字內(nèi)容。HTML結(jié)構(gòu)相當(dāng)簡單：


  
TEXT

CSS代碼也一樣簡單。我們想要使用無襯線字體，并確保div中的段落文本是白色的，可以通過如下代碼來實(shí)現(xiàn)：

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

另外，給box元素添加如下CSS屬性：

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */

  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}

無論你對(duì)CSS的過渡屬性熟悉與否，我們?cè)谶@里都來簡要介紹一下，一共分為三步。.第一步，我們需要將它應(yīng)用到all變化的屬性。接下來，設(shè)置過渡時(shí)長為0.25秒。最后，將動(dòng)畫函數(shù)選為ease。ease的表現(xiàn)狀態(tài)就是起止過程比較緩慢，中間過渡迅速。

holly high! 目前準(zhǔn)備工作都已經(jīng)就緒，接下來就是添加過渡效果了。到目前為止，div看起來應(yīng)該像下面這樣。

褪色效果

首先，添加一個(gè)褪色的過渡。新建一個(gè)div元素，并為它添加一個(gè)名為fade的類：


  
FADE HERE

接下來我們所需要做的就是為這個(gè)fade類指定懸停規(guī)則。我們需要借助CSS偽類選擇器:hover來完成這件事情。這個(gè)偽類選擇器對(duì)所有的元素都有效，并且會(huì)在元素處于鼠標(biāo)指針懸停狀態(tài)下的時(shí)候激活CSS聲明。基于此，我們借助:hover選擇器將div的透明度改為0.5：

.fade:hover {
  opacity: 0.5;
}

簡單吧。上面這句CSS聲明就為div指定了一個(gè)懸停效果。如下就是目前它展現(xiàn)的樣子。而你之所以能夠看到過渡樣式，是因?yàn)槲覀円婚_始在名為box的類中使用了transition:all 0.25s ease;的聲明。看下面，是不是一個(gè)還不錯(cuò)的褪色效果：

來點(diǎn)顏色看看

指定一個(gè)變色過渡其實(shí)和褪色過渡的過程異曲同工。首先，創(chuàng)建一個(gè)div元素，并為它添加一個(gè)名為color的類。


  
COLOR HERE

同樣地，我們也要借助:hover選擇器來幫我們完成這件事，但是這一次我們不是改變透明度而是背景色：

.color:hover {
  background: #FF5722;
}

如下就是實(shí)際效果了：

一起搖擺

接下來，來實(shí)現(xiàn)一個(gè)擺動(dòng)的效果。這個(gè)效果實(shí)現(xiàn)起來比前面的兩個(gè)例子稍顯復(fù)雜。在這個(gè)例子中，我會(huì)采用@keyframes來完成。

@keyframes——賦予你在一個(gè)CSS動(dòng)畫序列中控制中間步驟的魔力。

首先還是一樣，你肯定已經(jīng)聽煩了，創(chuàng)建一個(gè)div元素，并未它添加一個(gè)名為wiggle的類：


  
WIGGLE WIGGLE

接下來，我們要做的就是借助@keyframes來創(chuàng)建動(dòng)畫。我們先給動(dòng)畫起個(gè)名字，就叫wiggle吧。并在如下的代碼中添加抖動(dòng)效果的實(shí)現(xiàn)：

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}

從上面的代碼已經(jīng)可以看出，@keyframes賦予我們將動(dòng)畫分解成單步，并且精確定義每一步發(fā)生了什么的能力。通過百分比的方式指定動(dòng)畫的進(jìn)度：

20%——div相對(duì)于初始位置右移4px。

40%——div相對(duì)于初始位置左移4px。

60%——div相對(duì)于初始位置右移2px。

80%——div相對(duì)于初始位置左移1px。

100%——div恢復(fù)到初始位置。

現(xiàn)在我們就能借助:hover選擇器來展示wiggle的動(dòng)畫了：

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

我們將animation設(shè)置成wiggle。同時(shí)希望動(dòng)畫持續(xù)1秒的時(shí)長，采用ease的動(dòng)畫效果。

最后，就是指定動(dòng)畫在每次鼠標(biāo)指針懸停的時(shí)候觸發(fā)一次。

下圖就是最終的動(dòng)畫效果：

想學(xué)習(xí)更多的CSS技術(shù)可以關(guān)注我的博客：CODECOLOR

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

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

相關(guān)文章

  • 送給CSS初學(xué)者的懸停過渡動(dòng)畫三部曲

    摘要：最后，將動(dòng)畫函數(shù)選為。的表現(xiàn)狀態(tài)就是起止過程比較緩慢，中間過渡迅速。褪色效果首先，添加一個(gè)褪色的過渡。通過百分比的方式指定動(dòng)畫的進(jìn)度相對(duì)于初始位置右移。同時(shí)希望動(dòng)畫持續(xù)秒的時(shí)長，采用的動(dòng)畫效果。 CSS不一定要寫得多么復(fù)雜才能實(shí)現(xiàn)特殊效果。如下就是三個(gè)超級(jí)簡單的過渡的例子，可能只是幾行代碼，但是添加到Web應(yīng)用程序中，卻會(huì)讓它增色不少。showImg(https://segmentfa...

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

  • 2017-09-01 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選如何優(yōu)雅的編寫代碼深入理解內(nèi)部機(jī)制專題之函數(shù)組合年月個(gè)有趣的和庫最經(jīng)典的前端面試題之一，你能答出什么幺蛾子中文翻譯深入理解響應(yīng)式原理掘金譯與和交互掘金箭頭函數(shù)使用禁忌技術(shù)棧耕耘助力美團(tuán)點(diǎn)評(píng)前端進(jìn)階之路前端模塊 2017-09-01 前端日?qǐng)?bào) 精選 如何優(yōu)雅的編寫 JavaScript 代碼深入理解 Node.js Stream 內(nèi)部機(jī)制JavaScript專題之函數(shù)組合20...

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

  • css布局方法

    摘要：在正常布局中位于該浮動(dòng)元素之下的內(nèi)容，此時(shí)會(huì)圍繞著浮動(dòng)元素，填滿其右側(cè)的空間。這樣所有元素就會(huì)緊貼左邊浮動(dòng)，如果想要左右浮動(dòng)，就可以把最右邊的元素設(shè)置為這樣就可以實(shí)現(xiàn)左右布局。谷歌搜索可以設(shè)置一個(gè)元素的漸變色，來使一個(gè)元素包含多種顏色。 1、左右布局 這就要說到一個(gè)屬性float，使用float: left;就可以讓浮動(dòng)元素 會(huì)脫離正常的文檔布局流，并吸附到其父容器的左邊。在正常布局中...

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

  • vue學(xué)習(xí)筆記（二）

    摘要：供用戶在相應(yīng)的階段對(duì)其進(jìn)行操作。我們像下面這樣使用這個(gè)指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個(gè)常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個(gè)階段。 這八個(gè)階段里分別有一個(gè)叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對(duì)其進(jìn)行操作。 beforeCreate(){ //組件實(shí)例剛...

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

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

0條評(píng)論

閱讀需要支付1元查看
<