小程序 纯css 实现tab导航栏下划线跟随动画

html-css016

小程序 纯css 实现tab导航栏下划线跟随动画,第1张

很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验。如下图:

在开发者工具中预览效果

我们可以用两种方法实现这样动画,css3的过渡或者用js去控制。省事的当然是用css3来写啦,我们先来看看css3的具体实现。

css3实现:

先看最基本的.wxml布局:

从图中可以看到,当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢?就是红圈部分,用translateX位移来移动,而transitions实现一个过渡效果。

curtab就是当前点击tab的index,点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。

来看看.js部分:

这样就能简单实现一个tab跟随动画啦。

(以上方法有个不足,就是tab的宽度是固定的,但是在实际开发中更多时候会遇到宽度不固定的情况。)

js实现:

有些喜欢折腾的同学说想要js来实现呢?当然也是可以的,用js来实现的思路也是一样,用控制line元素的translateX值。那么怎么知道应为位移多少呢?就是动态的去获取该位移的值,然后赋给translateX。

说到动态的去获取元素额left值,可以用到小程序的 wx.createSelectorQuery 这个api在传入元素后返回元素的四个位移值。(这里不细说api的用户,不清楚的同学请自行查看文档哈哈哈)

那是不是可以:

来看看具体的实现:

emmm最后说一下,前端时间看到过一个很骚的操作,同样是用纯css实现这种跟随动画,先看看效果图:

.css

第一步:编辑菜单的HTML代码。

菜单包含三个列表项,分别取名为“Menu1”、“Menu2”、“Menu3”。

XML/HTML Code

<div class="css3Menus">      

<ul>      

   <li>Menu1</li>      

   <li>Menu2</li>      

   <li>Menu3</li>      

</ul>      

</div>

第二步:设置菜单的背景。

在该步骤中,把导航的背景设置为黑色。宽度、高度和内边距为可选项,可以不设置。

CSS Code

.<span style="width: auto height: auto float: none" id="4_nwp"><a style="text-decoration: none" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=css3&k0=css3&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="4_nwl"><span style="color:#0000fffont-size:14pxwidth:autoheight:autofloat:none">css3</span></a></span>Menus {      

background: #14080a      

width:506px      

height:260px      

padding:20px      

}

如下图:

第三步:利用border-radius,制作圆形导航。

该步中,利用CSS3的一些酷的功能,尤其是border-radius ,将每个列表项的背景设置为黄色,形状为圆形。

CSS Code

ul {      

list-style: none      

}      

   

li {      

float:left      

font: 14px/10px Arial, Verdana, sans-serif      

color:#FFF      

background-color:#CCCC00      

width: 80px      

height: 80px      

padding:20px      

margin:0 30px 0 0      

-webkit-border-radius: 60px      

-moz-border-radius: 60px      

border-radius: 60px      

}

菜单看起来呈下面样子:

第四步:设置菜单的对齐方式。

本步骤中,将为每个列表项设置特定的背景颜色与位置:

CSS Code

li#menu1 {      

background-color: #00FFCC      

}      

li#menu2 {      

background-color: #CC9900      

margin-top:100px      

}      

li#menu3 {      

background-color: #33FF66      

margin-top:50px      

}

现在菜单看起来呈下面样子:

第五步:设置菜单中链接的对齐方式。

CSS Code

li a {      

color:#FFF      

text-decoration:none      

display:<span style="width: auto height: auto float: none" id="2_nwp"><a style="text-decoration: none" mpid="2" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=block&k0=block&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="2_nwl"><span style="color:#0000fffont-size:14pxwidth:autoheight:autofloat:none">block</span></a></span>      

width: 80px      

height: 45px text-align: center      

padding:35px 0 0 0      

margin:0 40px 0 0      

-webkit-border-radius: 40px      

-moz-border-radius: 40px      

border-radius: 40px      

}      

li#menu1 a {      

background-color: #FF0000      

}      

li#menu2 a {      

background-color: #660033      

}      

li#menu3 a {      

background-color: #66CCCC      

}

菜单现阶段的样子:

第六步:定义另一种效果,当鼠标悬浮在链接上时进行展现。 

CSS Code

li a:hover,      

li a:focus,      

li a:active {      

width: 120px      

height:65px      

padding:55px 0 0 0      

margin:-20px 0 0 -20px      

-webkit-border-radius: 60px      

-moz-border-radius: 60px      

border-radius: 60px      

}

菜单样式如图:

第七步:最后为导航增加动画效果。

CSS Code

li a:hover,      

li a:focus,      

li a:active {      

-webkit-animation-name:bounce      

-webkit-animation-duration:1s      

-webkit-animation-iteration-count:4      

-webkit-animation-direction:alternate      

}      

@-webkit-keyframes bounce{<span style="width: auto height: auto float: none" id="1_nwp"><a style="text-decoration: none" mpid="1" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=from&k0=from&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="1_nwl"><span style="color:#0000fffont-size:14pxwidth:autoheight:autofloat:none">from</span></a></span>{margin:0 40px 0 0}      

to{margin:120px 40px 0 0}      

}

菜单所产生的动画效果:

有这样一种效果,导航栏上面的导航内容可以实现立体翻转的效果,这是怎样实现的呢?这是基于css动画属性实现的。

前提:忘了这个属性的具体内容的点击下方链接可以查看

css的transform属性: https://www.runoob.com/cssref/css3-pr-transform.html

有两个值 :

1.1 flat:在2维平面呈现

1.2 preserve-3d:在3维空间呈现

每个li中放两个span , 最先展示前面的span ,当鼠标滑过的时候,前面的span沿着x轴向下翻转90度,后面的span沿着x轴向上翻转90度。

页面

最后:我目前没找到在中怎么加入视频的,现在看不了动态效果,如果哪位田螺姑娘/小哥知道怎么加入动图,可以留言教我一下,谢谢啦!