首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3 给页面加个半圆形导航条主要利用旋转和倾斜样式

Posted in HTML / CSS onFebruary 10, 2014

主要是利用了css3的 rolate(旋转) 和 skew (倾斜)样式

先上代码:

html 很简单

复制代码
代码如下:

<body>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="a.html"><i class="fa fa-volume-down"></i></a></li>
<li><a href="#"><i class="fa fa-headphones"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-trophy"></i></a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>
</ul>
</div>
</body>

这里的i标签 用了一个第三方库 http://fortawesome.github.io/Font-Awesome/icons/

接下来是css

先来个半圆形button

复制代码
代码如下:

.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}

主要起作用的是
复制代码
代码如下:

border-radius: 50%;

可以试一下,如果想把一个div变成圆形,就用这行代码,那半圆呢? 你把剩下半个挡住不就OK了！

我们把 cn-warpper也变成半圆的

复制代码
代码如下:

.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}
复制代码
代码如下:

-webkit-transform: scale(0);

是为了让它一开始不显示

接下来是重头戏了，如何把半圆分成5个li

首先给li加基本样式，宽高，让他们重叠

复制代码
代码如下:

.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}
复制代码
代码如下:

overflow: hidden;

这个必须有，后面说明！

然后 让li变斜，为什么变斜？如果都是正方形，要不然怎么够分呢？

复制代码
代码如下:

.cn-wrapper li:first-child {
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
overflow: hidden;
-webkit-transform: rotate(0deg) skew(50deg);
}

变斜的关键
复制代码
代码如下:

-webkit-transform: rotate(0deg) skew(50deg);

skew（50deg）就是在水平方向倾斜50度（姑且称之为度），rotate围绕自己旋转0度 也就是不转，第一个li不用转，只用倾斜就可以，后面的li要依次旋转36度，为什么36度？ 180/5

然后就是li下的a了

复制代码
代码如下:

.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg);
}
复制代码
代码如下:

text-align: center;
padding-top: 2em;
padding-right: 20px;

这些都是为了设置icon的位置，没什么要说的
复制代码
代码如下:

-webkit-transform: skew(-50deg) rotate(-70deg);

为了迎合父节点li的变斜，所以skew为负50度，rotate负70 （这样也是为了icon能在div中间显示text-align:center）

接下来你可以把上边的overflow::hidden去掉试试看，是不是全乱了？这段代码就是为了抱住其子节点的样式，即使子节点的样式是乱的，只要不让它显示出来就可以了。

OK，接下来就是一些基本的样式了

全部代码：

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}
.open {
-webkit-transform: scale(1);
}
.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}

.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
border-radius: 50%;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg) ;
}
.cn-wrapper li:first-child {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(0deg) skew(50deg);
}
.cn-wrapper li:nth-child(2) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(36deg) skew(50deg);
}
.cn-wrapper li:nth-child(3) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(72deg) skew(50deg);
}
.cn-wrapper li:nth-child(4) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(108deg) skew(50deg);
}
.cn-wrapper li:nth-child(5) {
left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(144deg) skew(50deg);
}
.cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
.cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.cn-wrapper li a:hover {
background-color: #a11313;
}
body {
background-color:rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a id="aaa1" href="a.html"><i class="fa fa-volume-down"></i></a></li>
<li><a href="#"><i class="fa fa-headphones"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-trophy"></i></a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>
</ul>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
var button = $("#cn-button");
button.click(function(){
$("#cn-wrapper").toggleClass("open");
if (button.text() === "+") {
button.text("-");
} else {
button.text("+");
}
});
//button.addEventLis
</script>
</html>


css3 给页面加个半圆形导航条主要利用旋转和倾斜样式

css3 给页面加个半圆形导航条主要利用旋转和倾斜样式

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 #HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 #HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 #HTML / CSS
css3教程之倾斜页面
Jan 27 #HTML / CSS
使用css3制作动感导航条示例
Jan 26 #HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 #HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 #HTML / CSS
pytz(1) V Rising(1) commit(1) Navicat(1) 内置函数(1) Tablespace(1) 自定义函数(1) procedure(1) GoFrame(3) harbor(1)
You might like
让你的网站首页自动选择语言转跳
2006/12/06 PHP
实用函数2
2007/11/08 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
初识NodeJS服务端开发入门（Express+MySQL）
2017/04/07 NodeJs
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python encode和decode的妙用
2009/09/02 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python 实现线程之间的通信示例
2020/02/14 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
娇韵诗Clarins意大利官方网站：法国天然护肤品牌
2020/03/11 全球购物
消防应急演练方案
2014/02/12 职场文书
大班幼儿评语大全
2014/04/30 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
项目备案申请报告
2015/05/15 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
60句有关成长的名言
2019/09/04 职场文书
Python 如何安装Selenium
2021/05/06 Python