css3實作上拉提示指標動畫的實例詳解

今天要實現的內容如下圖：

有了css3的動畫屬性，實作起來非常的簡單。

html佈局：

<p class="pointer">
   <p></p>
</p>

讓.pointer的p放在你想要他顯示方，p放的是指標箭頭圖的地片，而.pointer的p是盒子，因為包裹這個箭頭的盒子要實現向上移動的效果，所以p的高度要比箭頭高度高出10px。

css樣式：

.pointer{
    position: absolute;
    height: 3.8rem;
    bottom: 3rem;
    width: 100%;
}
.pointer p{
    animation: anima-pointer 2s infinite;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1.4rem;
    height: 2.8rem;
    width: 2.8rem;
    background: url("../images/css-sprites.png") -63px 0;
}

/*animation*/
@keyframes anima-pointer
{
    0%   {opacity:0;bottom:0}
    100%  {opacity:1;bottom:10px;}
}

其中。這是我的專案中的程式碼，因為我對.pointer的p還需要定位，所以使用了position:absolute，你可以使用其他的屬性除了static，讓箭頭p可以相對於父元素進行絕對定位。

重點看animation：
使用css動畫，首先要使用@keyframes 進行動畫聲明，這裡聲明為anima-pointer，0%時讓他在原地且不顯示，然後過渡到100%不透明度為1顯示且位置相對於原來位置上升了10px。
對箭頭p的樣式使用動畫時使用animation：後邊跟剛剛聲明的動畫和一些動畫的屬性即可。具體的動畫屬性可參考w3c官方文檔，這裡聲明的屬性是動畫持續兩秒，並無限次循環執行動畫。

以上是css3實作上拉提示指標動畫的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！