真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)

這篇文章主要講解了“分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)”吧!

創(chuàng)新互聯(lián)主營寧鄉(xiāng)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),寧鄉(xiāng)h5成都小程序開發(fā)搭建,寧鄉(xiāng)網(wǎng)站營銷推廣歡迎寧鄉(xiāng)等地區(qū)企業(yè)咨詢

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

在這個項(xiàng)目中,我們將把過渡效果應(yīng)用到一個class為box的元素上面。這個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 */
}

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

分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)

  1. 褪色效果

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


  

FADE HERE

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

.fade:hover {
  opacity: 0.5;
}

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

分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)

2.來點(diǎn)顏色看看

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


  

COLOR HERE

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

.color:hover {
  background: #FF5722;
}

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

分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)

3.一起搖擺

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

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

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


  

WIGGLE WIGGLE

接下來,我們要做的就是借助@keyframes來創(chuàng)建動畫。我們先給動畫起個名字,就叫wiggle吧。并在如下的代碼中添加抖動效果的實(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賦予我們將動畫分解成單步,并且精確定義每一步發(fā)生了什么的能力。通過百分比的方式指定動畫的進(jìn)度:

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

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

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

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

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

分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)

感謝各位的閱讀,以上就是“分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!


網(wǎng)站題目:分享CSS項(xiàng)目懸停過渡動畫三部曲的實(shí)現(xiàn)
當(dāng)前鏈接:http://weahome.cn/article/pcpjeo.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部