送給CSS初學者的懸停過渡動畫三部曲

leo108 發布于2019-08-29 18:44 / 677人閱讀

摘要：最后，將動畫函數選為。的表現狀態就是起止過程比較緩慢，中間過渡迅速。褪色效果首先，添加一個褪色的過渡。通過百分比的方式指定動畫的進度相對于初始位置右移。同時希望動畫持續秒的時長，采用的動畫效果。

CSS不一定要寫得多么復雜才能實現特殊效果。如下就是三個超級簡單的過渡的例子，可能只是幾行代碼，但是添加到Web應用程序中，卻會讓它增色不少。

如下是我們將在本教程中構建的代碼

項目設置

在這個項目中，我們將把過渡效果應用到一個class為box的元素上面。這個box元素內部是垂直和水平居中的文字內容。HTML結構相當簡單：


  TEXT

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

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 */
}

無論你對CSS的過渡屬性熟悉與否，我們在這里都來簡要介紹一下，一共分為三步。.第一步，我們需要將它應用到all變化的屬性。接下來，設置過渡時長為0.25秒。最后，將動畫函數選為ease。ease的表現狀態就是起止過程比較緩慢，中間過渡迅速。

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

褪色效果

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


  FADE HERE

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

.fade:hover {
  opacity: 0.5;
}

簡單吧。上面這句CSS聲明就為div指定了一個懸停效果。如下就是目前它展現的樣子。而你之所以能夠看到過渡樣式，是因為我們一開始在名為box的類中使用了transition:all 0.25s ease;的聲明。看下面，是不是一個還不錯的褪色效果：

來點顏色看看

指定一個變色過渡其實和褪色過渡的過程異曲同工。首先，創建一個div元素，并為它添加一個名為color的類。


  COLOR HERE

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

.color:hover {
  background: #FF5722;
}

如下就是實際效果了：

一起搖擺

接下來，來實現一個擺動的效果。這個效果實現起來比前面的兩個例子稍顯復雜。在這個例子中，我會采用@keyframes來完成。

@keyframes——賦予你在一個CSS動畫序列中控制中間步驟的魔力。

首先還是一樣，你肯定已經聽煩了，創建一個div元素，并未它添加一個名為wiggle的類：


  WIGGLE WIGGLE

接下來，我們要做的就是借助@keyframes來創建動畫。我們先給動畫起個名字，就叫wiggle吧。并在如下的代碼中添加抖動效果的實現：

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

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

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

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

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

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

100%——div恢復到初始位置。

現在我們就能借助:hover選擇器來展示wiggle的動畫了：

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

我們將animation設置成wiggle。同時希望動畫持續1秒的時長，采用ease的動畫效果。

最后，就是指定動畫在每次鼠標指針懸停的時候觸發一次。

下圖就是最終的動畫效果：

想學習更多的CSS技術可以關注我的博客：CODECOLOR

GPU云服務器云服務器翻轉過渡動畫 ios過渡動畫 jquery過渡動畫 css過渡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114541.html

送給CSS初學者的懸停過渡動畫三部曲

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

jsliang 2019-08-02 16:14 評論0 收藏0
2017-09-01 前端日報

摘要：前端日報精選如何優雅的編寫代碼深入理解內部機制專題之函數組合年月個有趣的和庫最經典的前端面試題之一，你能答出什么幺蛾子中文翻譯深入理解響應式原理掘金譯與和交互掘金箭頭函數使用禁忌技術棧耕耘助力美團點評前端進階之路前端模塊 2017-09-01 前端日報精選如何優雅的編寫 JavaScript 代碼深入理解 Node.js Stream 內部機制JavaScript專題之函數組合20...

Arno 2019-08-20 19:07 評論0 收藏0
css布局方法

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

LMou 2019-08-29 15:42 評論0 收藏0
vue學習筆記（二）

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

klivitamJ 2019-08-30 13:48 評論0 收藏0