css3实现动态圆形导航栏
核心问题：
1.圆形怎样实现？
css3的圆角属性：border-radius:__ px; 把值设大点就圆啦。
2.怎样实现动画效果？
css3的transition属性：transition:__ s;控制转变过程的时间， 时间不要太短也不要太长。
3.动画样式？
动画样式有很多很多，基本上能更改的属性样式都能形成动画。实例中：在圆角之前li标签是个“方块”，通过更改border的上下左右颜色实现动画，看起来像外部的“环”在旋转。
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
font:Arial 12px;
}
ul{
list-style-type:none;
}
li{
width:40px;
height:40px;
background:#ccc;
margin:10px;
float:left;
text-align: center;
line-height: 40px;
border:8px solid;
border-radius:40px;
border-color:#999 #555 #999 #555;
} li:hover{
border-color:#555 #999 #555 #999;
}
li{
transition:1s;
}
a{
text-decoration:none;
}
</style>
<head>
<body>
<div>
<ul>
<li><a href='';>首页</a></li>
<li><a href='';>博文</a></li>
<li><a href='';>关于</a></li>
</ul>
</div>
</body>
</html>
效果图：
鼠标放在“首页”上时：
以下是各浏览器对border-radius的支持明细：
css3实现动态圆形导航栏的更多相关文章
- uniapp动态修改导航栏
1.修改导航栏buttons 如图动态修改角标 <template> <view> </view> </template> <script> ...
- css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
- iOS 动态修改导航栏颜色 UINavigationBar
示例 所谓动态修改 意思是 在当前页面滚动的过程中 亦或 是在 触发返回事件\进入一个新的页面 导航栏的动态变化 由于系统级别的navBar 高度集成 很多自己想实现的功能 很不好弄 如果是通过 ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- 前端开发教程：使用 CSS3 Transforms 构建圆形导航
在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航.教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式.不过不用担心,这里用到的数学知识真的是很简单的.教程使用 ...
- CSS3特效----制作立体导航栏菜单
使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...
- iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能
emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...
- uni-app nvue页面动态修改导航栏按钮
话不多说上代码 let pages = getCurrentPages() let page = pages[pages.length - 1]; let currentWebview = page. ...
- 动态导航栏和JavaScript箭头函数
动态导航栏和JavaScript箭头函数 今天我们来写一下动态的导航栏,并且学一下JavaScript的箭头函数等相关问题. 样式如下所示: html中执行代码如下所示: <!DOCTYPE h ...
随机推荐
- POJ 1363 Rails
Rails Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 21728 Accepted: 8703 Descriptio ...
- HMM MEMM & label bias
(http://blog.csdn.net/xum2008/article/details/38147425) 隐马尔科夫模型(HMM): 图1. 隐马尔科夫模型 隐马尔科夫模型的缺点: 1.HMM只 ...
- mysql 学习碎片
1.mysql 中执行 sql字符串 set @strSql='select 1200 as item'; prepare select_sql from @strSql; execute selec ...
- Changing Project Binding to Surround SCM Integration Provider with Visual Studio 2010
Changing Project Binding to Surround SCM Integration Provider with Visual Studio 2010 Sarah Wigser t ...
- js判定IE
var ie=!-[1,]; 这句话对于多数前端来说都很熟悉,遇到判定是否是ie浏览器就用这个,但是对于由来以及为什么可能没有深入了解过. 短短6个bytes就做了判定.这个表达式是利用IE和标准浏览 ...
- 转：C#中String类的几个方法(IndexOf、LastIndexOf、Substring)
String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. ...
- 解决msgfmt无法使用的问题
参考: http://blog.sina.com.cn/s/blog_4fb490ff0100csne.html http://linux.die.net/man/1/msgfmt http://pa ...
- Linux - Yum的常用方法总结
简述 rpm是由红帽公司开发的软件包管理方式,使用rpm可以方便的进行软件的安装.查询.卸载.升级等工作. 但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时. Yum(全称 ...
- [Python]同是新手的我，分享一些经验
本来想分享一些知识,但是发现,写着写着,感觉分享一些经验,或许会少让大家走一些弯路,索性就把标题一改. 我不是教给大家些什么,我没有资格,我也是摸着石头过河,我只是本着分享的精神,在这里分享自己的东西 ...
- 利用百度词典API和Volley网络库开发的android词典应用
关于百度词典API的说明,地址在这里:百度词典API介绍 关于android网络库Volley的介绍说明,地址在这里:Android网络通信库Volley 首先我们看下大体的界面布局!