,,

利用css動(dòng)畫使某個(gè)元素div實(shí)現(xiàn)上下跳動(dòng)

2020-04-27

我們?cè)僦谱骶W(wǎng)站時(shí)，經(jīng)常會(huì)見(jiàn)到banner圖上面有一個(gè)類似鼠標(biāo)的小圖標(biāo)，這個(gè)小圖標(biāo)如果是靜態(tài)的，用戶體驗(yàn)感就大打折扣了，那么如何實(shí)現(xiàn)讓他可以上下浮動(dòng)呢？

<!DOCTYPE html >

<html>

<head>

<title>css動(dòng)畫--元素上下跳動(dòng)</title>

@-webkit-keyframes bounce-down {

25% {-webkit-transform: translateY(-10px);}

50%, 100% {-webkit-transform: translateY(0);}

75% {-webkit-transform: translateY(10px);}

}

@keyframes bounce-down {

25% {transform: translateY(-10px);}

50%, 100% {transform: translateY(0);}

75% {transform: translateY(10px);}

}

.animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;

}

@-webkit-keyframes bounce-up {

25% {-webkit-transform: translateY(10px);}

50%, 100% {-webkit-transform: translateY(0);}

75% {-webkit-transform: translateY(-10px);}

}

@keyframes bounce-up {

25% {transform: translateY(10px);}

50%, 100% {transform: translateY(0);}

75% {transform: translateY(-10px);}

}

.animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}

</style>

</head>

<body>

</body>

</html>

以上就是在H5場(chǎng)景動(dòng)畫時(shí)，箭頭持續(xù)上下跳動(dòng)來(lái)引導(dǎo)用戶上下滑動(dòng)整個(gè)頁(yè)面的效果代碼了。