html制作水晶状态导航栏,HTML5 CSS3水晶风格的页面头部
CSS
语言:
CSSSCSS
确定
body {
margin: 0;
padding: 0;
}
.crystal_container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 400px;
background: radial-gradient(at top left, rgb(0, 188, 212), rgb(3, 169, 244));
z-index: -999;
}
.block {
width: 198px;
height: 198px;
display: block;
background: radial-gradient(at top left, #FFCC4D, #FF9800);
border-top: 1px solid #ffcc80;
border-left: 1px solid #ffcc80;
border-right: 1px solid #bb8020;
border-bottom: 1px solid #bb8020;
box-shadow: 2px 2px 6px rgba(170, 31, 0, 0.2), 3px 8px 12px rgba(71, 35, 22, 0.3);
z-index: 999;
margin: 100px auto;
}
.text {
margin-left: 17px;
font-family: "Roboto Slab", serif;
font-weight: bold;
font-size: 24px;
line-height: 22px;
}
.crystal {
width: 0;
height: 0;
position: absolute;
z-index: -998;
}
#c01 {
border-bottom: 100px solid rgba(0, 96, 100, 0.1);
border-right: 100vw solid transparent;
bottom: 0;
right: 0;
}
#c02 {
border-bottom: 160px solid rgba(2, 136, 209, 0.3);
border-left: 100vw solid transparent;
bottom: 0;
left: 0;
}
#c03 {
border-top: 200px solid rgba(0, 96, 155, 0.2);
border-right: 40vw solid transparent;
border-left: 60vw solid transparent;
top: 0;
right: 0;
}
#c04 {
border-top: 400px solid rgba(24, 255, 255, 0.3);
border-right: 80vw solid transparent;
border-left: 20vw solid transparent;
top: 0;
left: 0;
}
#c05 {
border-bottom: 250px solid transparent;
border-top: 100px solid transparent;
border-right: 100vw solid rgba(128, 216, 255, 0.3);
bottom: 10px;
right: 0;
}
#c06 {
border-bottom: 400px solid rgba(79, 195, 247, 0.4);
border-right: 10vw solid transparent;
border-left: 30vw solid transparent;
bottom: 0;
right: 20vw;
}
#c07 {
border-top: 367px solid rgba(0, 131, 143, 0.2);
border-left: 60vw solid transparent;
top: 0;
right: 0;
}
#c08 {
border-top: 50px solid rgba(167, 255, 235, 0.4);
border-right: 60vw solid transparent;
top: 0;
left: 0;
}
#c09 {
border-top: 400px solid rgba(0, 176, 255, 0.3);
border-right: 30vw solid transparent;
top: 0;
left: 0;
}
#c10 {
border-bottom: 400px solid rgba(128, 222, 234, 0.2);
border-right: 20vw solid transparent;
border-left: 20vw solid transparent;
bottom: 0;
right: 60vw;
}
/* Description */
.description {
max-width: 500px;
margin: 40px auto 80px;
}
.description h2 {
font-family: "Roboto Slab", serif;
}
.description p {
font-family: sans-serif;
font-weight: lighter;
line-height: 24px;
text-align: justify;
}
/* Credits */
/*Designed by Brendan Bax ~ www.brendanbax.com*/
.credits {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
font-family: "Roboto Slab", serif;
background: #fff;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
}
a {
text-decoration: none;
color: #32ceea;
}
.credits_left {
display: block;
position: absolute;
left: 20px;
}
.credits_right {
display: block;
position: absolute;
right: 20px;
}
.social_icon {
display: inline-block;
width: 32px;
height: 32px;
margin: 8px;
}
html制作水晶状态导航栏,HTML5 CSS3水晶风格的页面头部相关推荐
- html响应式导航栏制作,用Sass制作响应式导航栏(原创)
插件描述:用Sass制作响应式导航栏 更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...
- 案例-翻转的导航栏(CSS3)
案例-翻转的导航栏(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
- 手把手教你制作手机底部导航栏,领导看完都说好
手把手教你制作手机底部导航栏,领导看完都说好
- 史上最完美的Android沉浸式状态导航栏攻略
前言 最近我在小破站开发一款新App,叫高能链.我是一个完美主义者,所以不管对架构还是UI,我都是比较抠细节的,在状态栏和导航栏沉浸式这一块,我还是踩了挺多坑,费了挺多精力的.这次我将我踩坑,适配各机 ...
- 利用CSS浮动制作一个简易导航栏
初学CSS,利用CSS浮动和无序列表制作一个简易导航栏: <!DOCTYPE html> <html lang="en"> <head>< ...
- MIPCMS模板制作之过滤导航栏
文章目录[隐藏] 需求说明 MIPCMS 模板制作之过滤导航栏 我是用MIPCMS有段事件了,做了两个模板,其中一个虽然有 bug 但是还是上线了,地址时:https://heboy.me.这个网站是 ...
- 转载:Android底部导航栏,三种风格和实现
原文出处 标题:Android底部导航栏,三种风格和实现 作者:阿飞__ 原文链接:Android底部导航栏,三种风格和实现_阿飞__的博客-CSDN博客_android导航栏 一.效果图展示 如果动 ...
- Android底部导航栏的三种风格实现
一.效果图展示 如果动图没有动的话,也可以看下面这个静态图 以下挨个分析每个的实现,这里只做简单的效果展示,大家可以基于目前代码做二次开发. 二.BottomNavigationView 这是 Goo ...
- 解决导航栏按钮背景色切换,刷新页面,按钮背景色切换,页面和路径没有切换问题
解决导航栏按钮背景色切换,刷新页面,按钮背景色切换,页面和路径没有切换问题 上篇博文中 点击导航栏切换背景色 有一个bug,如果点击第二个或者后面几个按钮,再刷新页面,按钮背景色会跳到第一个按钮上去, ...
最新文章
- 第15章节-Python3.5-Django实现用户登录与前端交互2 14
- sequential模型编译时的指标设置:sklearn.metrics:指标
- python天天学怎么样-python练习:好好学习,天天向上
- ArrayList基操
- python垃圾邮件识别_【Python】垃圾邮件识别
- Winform GDI+ 绘图
- @SuppressWarnings(rawtypes) 是什么含义
- js中的 substring和substr方法
- ant里面table嵌套子表格_ElementUI el-table行内编辑验证,动态增减行
- JSP编程技术3-服务器时钟示例
- python3 爬虫 urlretrieve
- 云计算成就代码之美——首届阿里云开发者大赛巡礼
- 计算机视觉不规则roi原理,C++ 中利用 Opencv 得到不规则的ROI 区域(已知不规则区域)...
- 网易考拉在服务化改造方面的实践
- 苹果mac启动台变成问号_MAC系统开机出现闪烁问号怎么办|MAC系统开机出现闪烁问号的解决方法-系统城...
- java.lang.NoClassDefFoundError: Could not initialize class找不类的问题
- AI智能曲谱识别|乐谱识别识音SDK|人声数拍SDK|智能钢琴、MIDI音乐、打谱、曲谱乐谱播放识别SDK、音序器、合成器、播放器软件
- dlink 备份文件_dlink 基本命令
- 【计算机网络】数据链路层(五)—— 广域网(PPP 协议与 HDLC 协议)
- 【3D数学】03 - 线性变换