css設(shè)置顯示隱藏動畫的方法

發(fā)布時間：2021-04-09 09:47:57 來源：億速云閱讀：3000 作者：小新欄目：web開發(fā)

小編給大家分享一下css設(shè)置顯示隱藏動畫的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css設(shè)置顯示隱藏動畫的方法：首先創(chuàng)建一個HTML示例文件；然后創(chuàng)建一個<div>標(biāo)簽，并設(shè)置一些文字；最后使用“@-webkit-keyframes”對fadenum類設(shè)置淡出淡入效果即可。

打開html開發(fā)軟件新建一個html代碼頁面。如圖：

css設(shè)置顯示隱藏動畫的方法

在html代碼頁面創(chuàng)建一個<div>標(biāo)簽，然后給這個<div>添加一個class類并設(shè)置一些文字，用于顯示淡出淡入動畫效果（那里中使用的類名：fadenum，下面將直接對該類進(jìn)行描述）。如圖：

css設(shè)置顯示隱藏動畫的方法

設(shè)置<div>類樣式。創(chuàng)建<style>標(biāo)簽，在這個標(biāo)簽里面設(shè)置fadenum類的寬、高、背景色，方便接下來查看淡出淡入效果。如圖：

css設(shè)置顯示隱藏動畫的方法

保存html代碼后使用瀏覽器打開即可看到設(shè)置<div>樣式顯示效果。

css設(shè)置顯示隱藏動畫的方法

添加淡出淡入動畫效果。使用@-webkit-keyframes對fadenum類設(shè)置淡出淡入效果。默認(rèn)開始是顯示，緊接著就是淡出，然后再淡入。

淡出淡入效果代碼：

@-webkit-keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}

css設(shè)置顯示隱藏動畫的方法

為fadenum類添加淡出淡入效果，直接把代碼添加到fadenum類即可。

使用animation進(jìn)行淡出淡入效果進(jìn)行時間、動畫方式進(jìn)行設(shè)置。如圖：

代碼：

-webkit-animation: fadenum 2s infinite;
    -moz-animation: fadenum 2s infinite;
  animation:fadenum 2s infinite;

css設(shè)置顯示隱藏動畫的方法

保存html代碼使用瀏覽器打開即可看到<div>標(biāo)簽自動淡出淡入效果。

css設(shè)置顯示隱藏動畫的方法

頁面所有代碼。可以直接復(fù)制所有代碼到新建html頁面，粘貼保存后使用瀏覽器打開即可看到效果。

所有代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3顯示隱藏效果</title>
<style>
.fadenum{
background-color: #ffce44;
width: 50px;height: 50px;
text-align:center;
line-height:50px;
margin:40px auto;
-webkit-animation: fadenum 2s infinite;
    -moz-animation: fadenum 2s infinite;
  animation:fadenum 2s infinite;
}
@-webkit-keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
@-moz-keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
@-o-keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
@keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
</style>
</head>
<body>
<div class="fadenum">30</div>
</body>
</html>

注意事項

案例中使用@-webkit-keyframes主要針對谷歌內(nèi)核瀏覽器，如果存在不兼容其他瀏覽器需要添加其他瀏覽器前綴

以上是“css設(shè)置顯示隱藏動畫的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css設(shè)置顯示隱藏動畫的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽