一款增加按钮的图标动画特效,点击“加号”图标按钮,加号中间的一竖条自动变形展开成图标菜单列表的样式,同时加号变形成减号。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791