如何制作H5页面底部提示向上滑的闪烁动画图标
0现在非常流行H5页面制作，微信场景制作，相信大家普遍在朋友圈里看过此类的手机页面的传播效果。而制作这种H5页面我们一般选用一些免费H5页面制作工具来完成，制作过程像PPT一样容易而且最重要的是免费！但是有一点需要指出的是你不能单独使用自己注册的域名，不能去掉这些平台（免费H5制作工具）的LOGO及版权相关信息，除非是自主制作开发H5页面，那就不存在这方面的限制，而且可以根据自己的想法自由DIY。
回归主题，我在制作这种H5页面的时候，想在页面底部制作一个提示浏览者向上滑的闪烁动画图标，如下图图中底部的箭头图标所示：
要实现这个不断在页面底部闪烁的动画图标，需要用到CSS3动画功能，原理很简单，看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何制作H5页面底部提示向上滑的闪烁动画图标-网站程序网</title>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;outline:none;list-style:none}
.section {
position:relative;
width:100px;
height:100px;
margin-bottom:20px;
background-color:#333;
}
.mouse-icon {
position:absolute;
left:0;
right:0;
bottom:5px;
z-index:100;
width:30px;
height:30px;
margin:0 auto;
}
.mouse-icon .wheel {
width:30px;
height:30px;
background:transparent url("/statics/limages/web-swipe-tip.png") no-repeat;
animation-delay: 0s;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: mouse-anim-drop;
animation-play-state: running;
animation-timing-function: linear;
margin-left: auto;
margin-right: auto;
position: relative;
top: 5px;
text-indent:-1000em;
}
@keyframes mouse-anim-drop {
0% {opacity:0;top:5px;}
30% {opacity:1;top:0px;}
100% {opacity:0;top:-5px;}
}
@keyframes mouse-anim-drop {
0% {opacity:0;top:5px;}
30% {opacity:1;top:0px;}
100% {opacity:0;top:-5px;}
}
</style>
</head>
<body>
<div class="section">
<div class="mouse-icon"><div class="wheel">手指在屏幕上向上滑</div></div>
</div>
</body>
</html>
效果如下所示：
- 版权声明：本站原创文章，于2017年03月06日，由网站程序网发表。
- 转载请注明：如何制作H5页面底部提示向上滑的闪烁动画图标-网站程序网
阅读排行