编程 HTML / CSS

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

Posted in HTML / CSS onFebruary 10, 2014

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

先上代码:

html 很简单

复制代码

代码如下:

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

接下来是css

先来个半圆形button

复制代码

代码如下:

主要起作用的是

复制代码

代码如下:

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 给页面加个半圆形导航条主要利用旋转和倾斜样式

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

HTML / CSS 相关文章推荐

css 省略号 css3让多余的字符串消失并附加省略号的实现代码

Feb 07 HTML / CSS

css3和jquery实现自定义checkbox和radiobox组件

Apr 22 HTML / CSS

使用CSS3制作响应式导航菜单的方法

Jul 12 HTML / CSS

CSS3实现时间轴效果

Jul 11 HTML / CSS

HTML5离线缓存Manifest是什么

Mar 09 HTML / CSS

使用HTML5 IndexDB存储图像和文件的示例

Nov 05 HTML / CSS

html5拖曳操作 HTML5实现网页元素的拖放操作

Jan 02 HTML / CSS

一个不错的HTML5 Canvas多层点击事件监听实例

Apr 29 HTML / CSS

HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例

Apr 24 HTML / CSS

Html5新标签datalist实现输入框与后台数据库数据的动态匹配

May 18 HTML / CSS

六种css3实现的边框过渡效果

Apr 22 HTML / CSS

能用CSS实现的就不要麻烦JavaScript了

Oct 05 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

You might like

用PHP调用数据库的存贮过程

2006/10/09 PHP

基于数据库的在线人数，日访问量等统计

2006/10/09 PHP

PHP+FLASH实现上传文件进度条相关文件下载

2007/07/21 PHP

探讨PHP使用eAccelerator的API开发详解

2013/06/09 PHP

php实现将数组或对象写入到文件的方法小结【三种方法】

2020/04/22 PHP

jQuery实现动画效果的实例代码

2013/05/07 Javascript

window.location不跳转的问题解决方法

2014/04/17 Javascript

jquery 取子节点及当前节点属性值

2014/07/25 Javascript

jQuery中slideUp 和 slideDown 的点击事件

2015/02/26 Javascript

JavaScript实现模仿桌面窗口的方法

2015/07/18 Javascript

js实现无缝循环滚动

2020/06/23 Javascript

解决同一页面中两个iframe互相调用jquery,js函数的方法

2016/12/12 Javascript

node.js报错：Cannot find module 'ejs'的解决办法

2016/12/14 Javascript

Vue.js 递归组件实现树形菜单（实例分享）

2016/12/21 Javascript

Bootstrap select多选下拉框实现代码

2016/12/23 Javascript

Angularjs自定义指令实现三级联动选择地理位置

2017/02/13 Javascript

详述 Sublime Text 打开 GBK 格式中文乱码的解决方法

2017/10/26 Javascript

vue项目中使用lib-flexible解决移动端适配的问题解决

2018/08/23 Javascript

javascript删除数组元素的七个方法示例

2019/09/09 Javascript

解决vue cli4升级sass-loader(v8)后报错问题

2020/07/30 Javascript

[03:08]迎霜节狂欢！2018年迎霜节珍藏Ⅰ一览

2018/12/25 DOTA

小米5s微信跳一跳小程序python源码

2018/01/08 Python

Python numpy实现数组合并实例(vstack,hstack)

2018/01/09 Python

pycharm重置设置,恢复默认设置的方法

2018/10/22 Python

在PyCharm下打包*.py程序成.exe的方法

2018/11/29 Python

基于Python2、Python3中reload()的不同用法介绍

2019/08/12 Python

Python根据服务获取端口号的方法

2019/09/25 Python

python实现梯度下降算法的实例详解

2020/08/17 Python

AmazeUI折叠式卡片布局，整合内容列表、表格组件实现

2020/08/20 HTML / CSS

西班牙灯具网上商店：Lampara.es

2018/06/05 全球购物

泰国网上购物：Shopee泰国

2018/09/14 全球购物

波兰在线香水店：Perfumy.pl

2019/08/12 全球购物

前台接待的工作职责

2013/11/21 职场文书

2014最新实习证明模板

2014/10/02 职场文书

清明节文明祭祀倡议书

2015/04/28 职场文书

戒赌保证书

2015/05/11 职场文书