纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效
附上效果图：
代码如下，复制即可使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background: #801638;
}
body,
body > * {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
* {
transition: all .3s ease 0s;
}
/* Background colours */
div + div article:nth-child(1) {
background: #c22326;
}
div + div article:nth-child(2) {
background: #f37338;
}
div + div article:nth-child(3) {
background: #fdb632;
}
div + div article:nth-child(4) {
background: #027878;
}
div + div article:nth-child(5),
div + div {
background: #801638;
}
/* Main layout */
html,
body,
div + div {
width: 100vw;
height: 100vh;
}
div + div {
list-style: none;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
overflow: hidden;
}
/* Articles */
div + div article {
flex: initial;
width: 20%;
height: 100%;
text-align: center;
color: #fff;
text-decoration: none;
vertical-align: bottom;
box-sizing: border-box;
padding: 2vh 1vw;
position: relative;
}
/* Big Headings */
body > div:first-child {
position: fixed;
bottom: 8vh;
background: #fff;
width: 100%;
text-align: center;
padding: .5rem;
z-index: 2;
}
body > div:first-child h1,
body > div:first-child h2 {
margin: 0;
padding: 0;
}
/* Hover interaction */
div + div:hover article {
flex: initial;
width: 10%;
}
div + div article:hover {
width: 60%;
}
article > div {
opacity: 0;
transition: opacity .2s ease 0;
}
div + div article:hover > div {
opacity: 1;
transition: opacity .3s ease .3s;
}
/* navigation */
div + div article > h2 {
bottom: 2vh;
position: absolute;
text-align: center;
width: 100%;
margin: 0;
font-size: 3vh;
}
/* Article layouts */
article div {
text-align: left;
width: 58vw;
}
article div p,
article div div h2,
article div h3 {
margin: 0 0 1em 0;
} article div p {
width: 40vw;
}
@media (max-width: 900px) {
div + div article {
padding: 2vh 3vw;
}
div + div article > h2 {
transform: rotate(90deg);
bottom: 23vh;
min-width: 12em;
text-align: left;
transform: rotate(-90deg);
transform-origin: 0 0 0;
opacity: 1;
}
div + div article:hover > h2 {
opacity: 0;
}
article div p {
width: 50vw;
}
article div {
max-height: calc(72%);
overflow-y: auto;
}
}
</style>
</head>
<body>
<div>
<h1>我在这,谁敢动我。</h1>
<h2>我是你们大哥的头</h2>
</div>
<div>
<article>
<h2>大哥的小弟一</h2>
<div>
<h3>大哥的小弟一</h3>
<p>身高180</p>
<p>体重120</p>
</div>
</article>
<article>
<h2>大哥的小弟二</h2>
<div>
<h3>大哥的小弟二</h3>
<p>身高160</p>
<p>体重100</p>
</div>
</article>
<article>
<h2>大哥的小弟三</h2>
<div>
<h3>大哥的小弟三</h3>
<p>身高175</p>
<p>体重180</p>
</div>
</article>
<article>
<h2>大哥的小弟四</h2>
<div>
<h3>大哥的小弟四</h3>
<p>身高180</p>
<p>体重110</p>
</div>
</article>
<article>
<h2>大哥的小弟五</h2>
<div>
<h3>大哥的小弟五</h3>
<p>身高180</p>
<p>体重150</p>
</div>
</article>
</div>
</body>
</html>
如有错误，欢迎联系我指正，非常感谢！！！
纯CSS + 媒体查询实现网页导航特效的更多相关文章
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- css媒体查询：响应式网站
css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- 纯CSS实现的风车转动效果特效演示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS 媒体查询 响应式
媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...
随机推荐
- SESSION机制（转）
转自:http://www.cnblogs.com/zyf-zhaoyafei/p/4477175.html 一:Session与Cookie Session:在服务器端创建并存放在服务器的内存中的, ...
- 地图的可视化--Folium
1.安装folium pip install MarkupSafe-0.23-cp34-none-win_amd64.whl pip install Jinja2-2.8-py2.py3-none-a ...
- 这几个Xocode插件用过一段时间还比较稳定好用，Xcode6兼容，推荐给大家:
这几个Xocode插件用过一段时间还比较稳定好用,Xcode6兼容,推荐给大家: AdjustFontSize: 快捷调整Xcode字体,https://github.com/zats/AdjustF ...
- C# 获取两个时间段之间的所有时间与获取当前时间所在的季度开始和结束时间
一:C# 获取两个时间段之间的所有时间 public List<string> GetTimeList(string rq1, string rq2) { List<string&g ...
- 官方推荐的MySQL参数设置值
这oracle官方推荐的在OLTP环境下,MySQL参数设置的最佳实践. 下面的参数设置,对系统的性能会很有帮助.但是建议大家还是结合实际情况使用. APPLIES TO: MySQL Server ...
- 铁乐学Python_Day35_Socket模块3和hmac模块
验证客户端链接的合法性 如果你想在分布式系统中实现一个简单的客户端链接认证功能,又不像SSL那么复杂, 那么可以利用hmac+加盐的方式来实现. 例1:简单的服务端如下 #!/usr/bin/env ...
- 【php】页面加载优化的14条原则
1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cach ...
- MySql5.7.* 多实例安装部署
参考文献: http://blog.csdn.net/tornadojava/article/details/53318773 http://blog.csdn.net/u013948858/arti ...
- 硬盘上的一些算法小题目||and今天看了下林锐的书以及gdb调试 及一些变成算法小题目
gdb调试:观察点,断点,事件捕捉点.step 进入函数,next 跳过函数,until 跳出循环,finish 结束函数 林锐:书后试题 & c++的对象模型图 看了二叉树的非递归遍历, 链 ...
- 将一个文件中的内容,在另一个文件中生成. for line in f1, \n f2.write(line)
将一个文件中的内容,在另一个文件中生成. 核心语句: for line in f1: f1中的所有一行 f2.write(line) ...