仿抖音底部菜单响应式html代码十分酷炫

可以放在自己的网站手机端，也可以加一些图标美化一下。

简单html代码，复制下面代码，修改里面的href链接就可以了。

代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="author" content="http://www.wuiso.com/"/><title>抖音底部样式html代码</title></head><body>
<!--底部代码--><style>
footer {position: fixed;left: 0;bottom: 0;/*height: 2.59rem;*/width: 100%;background-color: #000;background-color: rgba(0, 0, 0, 0.84);border-top: 1px solid #e0e0e0;z-index: 999;
}footer>ul>li {float: left;width: 19%;text-align: center;font-size: 1rem;line-height: 39px;
}li {list-style: none;
}a {color: #fff;-webkit-backface-visibility: hidden;text-decoration: none;
}.router-link-exact-active {color: #fff;border-bottom: 1px solid #fff;
}.main2 {position: relative;color: #362732;background: #fff;border-radius: 8px;border-left: 2px solid rgba(23,255,232,.7);border-right: 2px solid rgba(254,44,85,.7);
}.g_wrap2 {text-shadow: -2px 0 rgba(0,255,255,.5), 2px 0 rgba(255,0,0,.5);
}.dropdown-ment {top: auto;bottom: 100%;margin-bottom: 2px;position: absolute;left: -3px;z-index: 1000;float: left;padding: 5px 0;margin: 2px 0 0;font-size: 16px;text-align: left;list-style: none;background-color: #000;background-color: rgba(0,0,0,.8);background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0,0,0,.15);border-radius: 4px;box-shadow: 0 6px 12px rgba(0,0,0,.5);
}
#xylo{width: 60px;padding: 2px 6px;}</style>
<footer>
<ul style="border-top: 1px solid rgba(255, 255, 255, 0.2);margin: 0;padding: 0;">
<li><a href="#" class="router-link-exact-active nav-active">首页</a></li>
<li><a href="#" class="">视频</a></li> <li class="main2">
<div class="g_wrap2" id="butt"><span style="padding-right: 5px;">≡</span>抖音</div>
<ul class="dropdown-ment" id="xylo" style="display:none;"><li><a href="#">快手</a></li>
<li><a href="#">美拍</a></li></ul></li> <li><a href="#" class="">网红</a></li>
<li><a href="#" class="">音乐</a></li></ul>
<div style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; display: none;"></div>
</footer>
<script type="text/javascript">window.onload = function () {var obt = document.getElementById("butt");var odiv = document.getElementById("xylo");function getStyle(obj, attr) {  //  谁的      那个属性if (obj.currentStyle)  // ie 等{return obj.currentStyle[attr];}else {return window.getComputedStyle(obj, null)[attr];  // w3c 浏览器}}//console.log(getStyle(odiv, 'display'));obt.onclick = function () {//获取的样式需要写在点击事件里面，写在外面只能获取一次，不能动态获取，if (getStyle(odiv, 'display') == "none") {odiv.style.display = "block";}else {odiv.style.display = "none";}}}</script>
</body>
</html>

仿抖音底部菜单响应式html代码十分酷炫相关推荐

仿抖音底部导航效果（二）
继续实现仿抖音底部导航今天要实现效果如下图首先在原基础的布局中加入一个ImageView <LinearLayoutandroid:layout_width="wrap_conte ...
仿抖音底部导航效果（一）
最终效果预览最终效果这次实现的是第一步效果本次效果 <h3 style="color:blue">原理解析:通过对控件添加动画来实现仿抖音底部导航的效果</ ...
抖音自拍特效如何java实现_Android高仿抖音照片电影功能的实现代码
效果如下滤镜效果转场效果使用首先在项目根目录的build.gradle文件里添加maven库 allprojects { repositories { ... maven { url 'htt ...
如何制作抖音卡点视频，使用预设制作酷炫转场
如何制作抖音卡点视频 1.首先你应该先找到一段音频.然后不要点击音频进行卡点.卡点的快捷键是m.这个卡点是在上面进行显示的.然后把你准备好的视频按住shift键,然后那些视频就会放在你的标记点上了.但 ...
python 角度判断_python的turtle也能仿抖音网红文字时钟的代码及分析
1.说明: 1.1 推荐指数:★★★ 1.2 推荐环境:python3.8和微软vscode编辑器 1.3 感言: python的turtle也能画出文字时钟,效果虽然不理想,有闪跳,但是也很棒,未采 ...
仿抖音短视频源码，高仿抖音双击点赞效果之双击的问题
仿抖音短视频源码中,实现仿抖音的双击点赞效果,相关代码如下: public class MyView extends View {private GestureDetector gestureDete ...
仿抖音短视频APP源码，底部弹窗对话框
仿抖音短视频APP源码,底部弹窗对话框的相关代码核心代码 final Dialog dialog = new Dialog(this, R.style.BottomDialogStyle); Vie ...
android+底部评论框,Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)...
实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他 ...
仿抖音评论底部弹出框（列表框+发表框）
BottomSheetDialogFragment高仿抖音评论底部弹出框先看效果图: 这个弹窗的效果是使用BottomSheetDialogFragment做的,第一个弹出的对话框为CommentL ...

仿抖音底部菜单响应式html代码十分酷炫

仿抖音底部菜单响应式html代码十分酷炫相关推荐

最新文章

热门文章