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 给页面加个半圆形导航条主要利用旋转和倾斜样式
HTML / CSS 相关文章推荐
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 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中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python内存管理实例分析
2019/07/10 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
九年级语文教学反思
2014/02/04 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
整改报告格式
2014/11/06 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
tomcat下部署jenkins的方法
2022/05/06 Servers