您当前的位置:首页 > 网站建设笔记 >

如何制作H5页面底部提示向上滑的闪烁动画图标

0

现在非常流行H5页面制作,微信场景制作,相信大家普遍在朋友圈里看过此类的手机页面的传播效果。而制作这种H5页面我们一般选用一些免费H5页面制作工具来完成,制作过程像PPT一样容易而且最重要的是免费!但是有一点需要指出的是你不能单独使用自己注册的域名,不能去掉这些平台(免费H5制作工具)的LOGO及版权相关信息,除非是自主制作开发H5页面,那就不存在这方面的限制,而且可以根据自己的想法自由DIY。

回归主题,我在制作这种H5页面的时候,想在页面底部制作一个提示浏览者向上滑的闪烁动画图标,如下图图中底部的箭头图标所示:

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>

效果如下所示:

手指在屏幕上向上滑
顶部中部底部