新聞資訊
我們不只做網(wǎng)站...
CSS制作箭頭上下移動(dòng)
發(fā)表日期:2022-03-07 文章編輯:洛壹網(wǎng)絡(luò)
CSS制作箭頭上下移動(dòng):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下跳動(dòng)的指標(biāo)箭頭</title>
<script src="./js/jquery.min.js"></script>
<style>
/*黑色半圓是圖片,上下箭頭也是圖片*/
.footer_btn{text-align:center;line-height:47px;}
@keyframes bounce-down {
25% {transform: translateY(-3px);}
50%{transform: translateY(0);}
75% {transform: translateY(3px);}
100% {transform: translateY(0);}
}
.animate-bounce-down{ -webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite;
}
@keyframes bounce-down1 {
25% {transform: translateY(-3px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(3px);}
}
.animate-bounce-down1{display:none;-webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite;
}
</style>
</head>
<body>
<div class="footer_btn">
<!-- 黑色半圓 -->
<img src="./images/sr1.jpg" alt="" class="animate-bounce-down" />
<!-- 上下箭頭 -->
<img src="./images/sr2.jpg" alt="" class="animate-bounce-down1" />
</div>
</body>
</html>
本文鏈接:http://www.snohomisheventcenter.com/news-details-39-650-1.html
版權(quán)聲明:
1:本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳,并且以計(jì)算機(jī)技術(shù)研究交流為目的,僅供大家參考、學(xué)習(xí),不存在任何商業(yè)目的與商業(yè)用途,如描述有誤或者學(xué)術(shù)不對(duì)之處歡迎及時(shí)提出,不甚感謝。
2、 如涉及版權(quán)問題,請(qǐng)聯(lián)系我們4724325@qq.com第一時(shí)間處理;
我們的服務(wù)
相關(guān)新聞
-
營銷型網(wǎng)站建設(shè),如何建設(shè)營銷型網(wǎng)站
-
input格式限定,只能輸入數(shù)字或者英文等
-
響應(yīng)式網(wǎng)站發(fā)展趨勢是時(shí)候了解下
-
網(wǎng)站建設(shè)所需費(fèi)用是多少?網(wǎng)站建設(shè)包括...
-
營銷型網(wǎng)站制作公司:營銷型網(wǎng)站建設(shè)的...
-
怎么做一個(gè)自己的網(wǎng)站?模板建站哪家好...
-
做網(wǎng)站建設(shè)的時(shí)候需要懂得哪方面的知識(shí)...
-
不要讓客戶從你手上路過——洛壹網(wǎng)絡(luò)為...
-
網(wǎng)頁中插入視頻的編碼格式
-
模板網(wǎng)站的壞處是什么?你了解多少