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,如果点击第二个或者后面几个按钮,再刷新页面,按钮背景色会跳到第一个按钮上去, ...
最新文章
- [Vue.js进阶]从源码角度剖析vue-router(三)
- shell shock 执行漏洞分析
- 双层for循环时间复杂度_2 常见的时间复杂度实例
- linux系统安装金蝶_linux 操作系统安装配置vnc
- redis延迟队列 实现_php使用redis的有序集合zset实现延迟队列
- Registry:THERE IS NOT VERSION ASSOCIATED FOR THIS PARTICULAR SCHEMA
- rsync增量复制命令用法和守护进程的配置
- centos mysql 主从安装_基于 CentOS Mysql 安装与主从同步配置详解
- 快速西门子PLC入门(零基础心得版)
- vector_capl
- 《统计学》第八版贾俊平第十章方差分析知识点总结及课后习题答案
- matlab中摄像机标定,基于Matlab的摄像机标定系统的设计与实现
- 计算机网络英文缩写汇总,计算机网络名词英文缩写解释大全
- 【Proteus仿真】BME280温湿度气压传感器数据串口输出
- 微信小程序踩坑”日记“--Failed to load image xxx (404)
- oracle外部表报错ora29400,报错ORA-29913 ORA-29400
- java的格式控制符_C语言的格式控制符
- Java后端程序员1年工作经验总结
- 一种低成本的兰吉尔电表电量采集方案
- Android根据经纬度获取城市名的方法