您的位置:首页 - 教程 - 网页特效 - 正文
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);
}
}

评论: