html5 css3 树形菜单,HTML5/CSS3卷边菜单效果
ul,li{
list-style-type:none;
padding:0;
}
.form{
width:405px;
height:200px;
background:#2f2f2f;
position:relative;
overflow:hidden;
margin:30px auto;
}
.corner{
background: -webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);
background: -moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
background: -o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
background: -ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
background: linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
width: 90px;
height:90px;
border-radius: 0 0 0px 90px / 0 0 0 30px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
left:-4px;
top: -4px;
box-shadow: 5px 2px 8px black;
overflow:hidden;
-webkit-transition:all 0.3s linear 0s;
-moz-transition:all 0.3s linear 0s;
-o-transition:all 0.3s linear 0s;
-ms-transition:all 0.3s linear 0s;
transition:all 0.3s linear 0s;
}
.corner:after{
height:100%;
width:100%;
position: absolute;
content: "";
top: -15px;
left: -82px;
border-radius: 90px 90px 0px 0 / 40px 40px 0 0;
z-index: 1;
background: #2F2F2F;
-webkit-transform: rotate(77deg);
-moz-transform: rotate(77deg);
-o-transform: rotate(77deg);
-ms-transform: rotate(77deg);
transform: rotate(77deg);
box-shadow: 0px 0px 8px black inset;
}
.button{
float: left;
height:40px;
margin:20px 20px;
border-radius:30px;
border:1px solid #151515;
box-shadow:0px 2px 2px rgba(0,0,0,0.6);
overflow:hidden;
}
.button li {
float: left;
}
.button li a{
float:left;
display:block;
text-decoration:none;
padding: 0 20px;
height:40px;
line-height:36px;
font-size:14px;
color:#eee;
text-align:center;
border-right:1px solid #151515;
box-shadow:-1px 0px 0px rgba(255,255,255,0.1) inset,inset 0px -1px 1px rgba(200,200,200,0.1),inset 0px 1px 2px rgba(255,255,255,0.1);
text-shadow:0px -1px 0px #000;
background:-webkit-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
background:-moz-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
background:-o-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
background:-ms-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
background:linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
}
.button li:first-child a{
border-radius:30px 0 0 30px;
}
.button li:last-child a{
border-radius:0px 30px 30px 0;
border-right: none;
}
.button li a:hover{
cursor:pointer;
background:-webkit-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
background:-moz-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
background:-o-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
background:-ms-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
background:linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
box-shadow:0px 2px 4px rgba(0,0,0,0.8) inset;
color:#b7def5;
text-shadow:0px 0px 8px rgba(0,162,255,0.8);
}
.notice{
position:relative;
padding:10px 0 0 25px;
margin: 20px auto;
width: 120px;
}
.arrow{
width:13px;
height:20px;
background:#FC9;
position:absolute;
top:0px;
left:0px;
-webkit-animation:notices linear 0.8s infinite ;
-moz-animation:notices linear 0.8s infinite ;
-o-animation:notices linear 0.8s infinite ;
-ms-animation:notices linear 0.8s infinite ;
animation:notices linear 0.8s infinite ;
}
.arrow:after{
width:0;
height:0;
border-width:12px;
border-style:solid dashed dashed dashed;
border-color:#FC9 transparent transparent transparent;
position:absolute;
bottom:-22px;
left:-5px;
display:block;
content:"";
}
@-webkit-keyframes notices{
0%{top:0px;}
50%{top:10px;}
100%{top:0px;}
}
@-moz-keyframes notices{
0%{top:0px;}
50%{top:10px;}
100%{top:0px;}
}
@-o-keyframes notices{
0%{top:0px;}
50%{top:10px;}
100%{top:0px;}
}
@-ms-keyframes notices{
0%{top:0px;}
50%{top:10px;}
100%{top:0px;}
}
@keyframes notices{
0%{top:0px;}
50%{top:10px;}
100%{top:0px;}
}
- Welcome
- Blog
- About Us
- Contact
(function(){
var form=document.getElementById("form");
var corner=document.getElementById("corner")
var ftop=form.offsetTop;
var fleft=form.offsetLeft;
var switchopen=0;
corner.οnmοusedοwn=function(e){
e.preventDefault();
form.style.cursor="move";
switchopen=1;
}
form.οnmοusemοve=function(e){
if(switchopen==1){
if(e.pageX-fleft>90 ||e.pageY-ftop>90){
corner.style.width=corner.style.height=90+"px";
corner.style.left=corner.style.top=-4+"px"
}
else{
corner.style.width=corner.style.height=e.pageY-ftop+"px";
}
}
}
form.οnmοuseup=function(){
switchopen=0;
this.style.cursor="default";
}
})()
html5 css3 树形菜单,HTML5/CSS3卷边菜单效果相关推荐
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- html5底部悬浮添加到桌面,如何使用CSS3+JQuery实现悬浮墙式菜单
前言 大家好,今天我要教你如何创建一个有用的悬停式用户界面,使用jQuery,CSS3,HTML5和@ font – face.你可能会问我,为什么是一个基于悬停的用户界面?好吧,由于现在很流行的基础 ...
- css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单
css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件 介绍 ( Introduction ) Off Canvas Me ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- html5 graphics with svg css3,HTML5 GRAPHICS WITH SVG AND CSS3
摘要: Want to create exciting HTML5 graphics without spending eternity in JavaScript? You can! This pr ...
- 用CSS3制作很特别的波浪形菜单
用CSS3制作很特别的波浪形菜单 原文:用CSS3制作很特别的波浪形菜单 网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换
HTML5的运用之纯CSS3实现的tab标签切换 CSS3代码实现的tab标签切换 *{padding:0px;margin:0px;} #tab{margin:20px;20px;position: ...
- 刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画
市面上大多数的热点地图,都是以 JavaScript 来做的,但是使用 CSS3 制作的热点地图倒还真的挺少见的. 其实 CSS3 的功能也很强大,能帮助我们实现很多用 JavaScript 实现的效 ...
最新文章
- 2019攻防世界web新手区
- 【组队学习】【23期】Datawhale编程实践（区块链）
- python 函数参数类型检查
- mysql子查询教行子查询_MySQL中列子查询与行子查询操作的学习教程
- svm涉及的一些概念
- 周梁伟：聊天室架构 如何跳出传统思维来设计？
- ITK:将标量映射到Jet Colormap中
- Flex与.NET互操作(七)：了解FluorineFx的环境配置（远程对象、网关、通道、目的地）...
- 保留凸性的方式：一个凸函数在一个随机变量上的期望仍然是凸函数
- oracle中dbms_如何在DBMS中找到关系的最高范式？
- android service 远程,android service(远程service) 知识点
- 封装 Vue.js 组件库
- flex textInput 限制输入
- 使用API Monitor监测到目标程序对系统API函数的调用（常用分析工具）
- Android 导入导出excel xls、xlsx
- 大数据审计的发展_关于发展大数据审计的几点思考
- 从历史故事看企业用人-之二--三国之东吴
- 读书笔记--一个人的朝圣
- java doc转换docx_JAVA - 将doc文档转为docx文档
- 在Domino上部署运行在Web浏览器中的Notes客户机