CSS3實現手機移動端觸屏向上拖動的提示箭頭動畫
編輯：網頁特效代碼
效果展示
請看效果頁面底部的動畫。當然，本效果只實現了向上的箭頭動畫，並未使用JS實現拖動效果。
本效果實現了向上拖動的箭頭，向左右或者向上的箭頭類似。
手機掃描二維碼查看效果：
本效果適用於Chrome，Edge，Firefox，微信，IE11，Opera等新版浏覽器。
相關參考：
hovertree.com/h/bjaf/pr_animation.htm
http://hovertree.com/h/bjaf/kqud99m6.htm
效果的HTML文件代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS3實現手機移動端向上拖動提示動畫箭頭_何問起</title><base target="_blank" />
<meta charset="utf-8" />
<link href="http://hovertree.com/texiao/css3/29/hovertree-upslide.css" rel="stylesheet" />
<style>
body{
background-color:black;
color:white;
margin:0px;
padding:0px;
overflow:hidden;
}
a{color:greenyellow;}
</style>
</head>
<body>
<h1>CSS3實現手機移動端提示向上拖動的箭頭動畫</h1>
<div>請看頁面底部的動畫。當然，本頁面只實現了向上的箭頭動畫，並未使用JS實現拖動效果。
<br />
<a href="http://hovertree.com">何問起</a>
<a href="http://hovertree.com/menu/texiao/">網頁特效</a>
<a href="http://hovertree.com/h/bjaf/vvxsmuh4.htm">代碼說明</a>
</div>
<span class="hovertree-upslide"></span>
</body>
</html>hovertree-upslide.css文件代碼：
/*
何問起
hovertree.com
*/
.hovertree-upslide {
position: absolute;
/*left: calc(50% - 10px);*/
display:inline-block;
left:0px;
right:0px;
bottom:0px;
margin-left:auto;
margin-right:auto;
width: 20px;
height: 20px;
z-index: 99;
animation: hovertreemove 1.5s infinite ease-in-out;
-webkit-animation: hovertreemove 1.5s infinite ease-in-out;
background-image:url(http://hovertree.com/texiao/css3/29/hovertreeup.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
@keyframes hovertreemove {
0% {
opacity: 0.1;
transform: translate3d(0,8px,0);
}
50% {
opacity: 1;
transform: translate3d(0,-8px,0);
}
100% {
opacity: 0.1;
transform: translate3d(0,-16px,0);
}
}
@-webkit-keyframes hovertreemove {
0% {
opacity: 0.1;
-webkit-transform: translate3d(0,8px,0);
}
50% {
opacity: 1;
-webkit-transform: translate3d(0,-8px,0);
}
100% {
opacity: 0.1;
-webkit-transform: translate3d(0,-16px,0);
}
}小編推薦
熱門推薦