仿bilibili导航条毛玻璃效果

写在前面

最近自学HTML+CSS为了检测自己的学习成果选择一个网页复刻一下，作为一个二次猿自然选择了b站。

首先看下还原程度

b站原版：

个人仿写：

个人认为还是有了较高的还原度因此写下这篇博客记录一下。

代码：

HTML:

<div id="head-pic">         <div id="header"><ul class="menu"><li class="menu-item"><img id="logo" src="img/logo.png"></li><li class="menu-item"><a class="menu-link" href="index.html" title="主页">主页</a></li><li class="menu-item"><a class="menu-link" href="#" title="漫画">漫画</a></li><li class="menu-item"><a class="menu-link" href="#" title="动画">动画</a></li><li class="menu-item"><a class="menu-link" href="#" title="下载专区">下载专区</a></li></ul></div><img id="festival-logo" src="img/eb023708f151543e83afb808294edd5bc5b9fab0.png"/></div>

CSS：

#head-pic{z-index: 0;height: 150px;width: 100%;background-image:url(../img/head.png) ;
}#header{width: 100%;height: 40px;z-index: 1;background-color: hsla(0,0%,100%,.4);display:flex;/*Flex布局*/display: -webkit-flex; /* Safari */align-items:center;/*指定垂直居中*/
}#festival-logo{margin-left: 20%;
}.menu{}#header:after{background-color: rgba(255,255,255,0.4);filter:blur(5px);
}

参考文章：点击打开链接

仿bilibili导航条毛玻璃效果相关推荐

android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）...
前言之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋.这次改用ViewPager+TabLayout 实现联动的效果. 实现效果 ViewPager 多 ...
仿照京东导航条html+css
源代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
jquery根据滚动像素显示隐藏顶部导航条
本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scroll ...
DIV+CSS基础教程：导航条的制作详解
课程开始: 前三节课,我们知道了什么是"内容块状元素和内联元素",以及XHTML+CSS布局的核心概念"盒子模型",同时又学习了一下页面布局中两种方 ...
【京东商城首页实战2】导航条制作（1）
接下来,开始制作京东的导航条.效果如下图: 图1 业务分析: 1.通栏盒子,并且有背景颜色 2.有版心. 3.版心里面包含左右浮动的两个盒子. 4.有下拉效果的盒子后面,有三角形标志. 5.右边的盒子 ...
原生JS实现特效导航条
分享一个用原生JS实现的特效导航条,效果如下: 实现代码如下: <!DOCTYPE html><head><meta charset="utf-8" ...
CSS 3.0实现创意菜单导航条
给大家分享一个用CSS 3.0实现创意菜单导航条,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&quo ...
毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...
使用CSS3制作倾斜导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

仿bilibili导航条毛玻璃效果

仿bilibili导航条毛玻璃效果相关推荐

最新文章

热门文章