增加按钮的图标动画特效【原创

来源:https://www.sucaihuo.com/js/3081.html 2017-09-24 11:44浏览(1056) 收藏

一款增加按钮的图标动画特效,点击“加号”图标按钮,加号中间的一竖条自动变形展开成图标菜单列表的样式,同时加号变形成减号。
增加按钮的图标动画特效
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入ionicons字体图标库和本地样式文件,代码如下:

<link type="text/css" rel='stylesheet' href='css/ionicons.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,用了多个div容器的嵌套结构来装载对应元素,代码如下:

<div class="centered">
  <div class="plus" id="plus">
    <div class="plus__line plus__line--v">
      <a href="#" class="plus__link ion-person"></a>
      <a href="#" class="plus__link ion-images"></a>
      <a href="#" class="plus__link ion-music-note"></a>
      <a href="#" class="plus__link ion-location"></a>
    </div>
    <div class="plus__line plus__line--h"></div>
  </div>
</div>

页面的底部,需引入必要的JS文件,代码如下:

<script type="text/javascript" src="js/index.js"></script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3081.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2