核心问题:

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实现动态圆形导航栏的更多相关文章

  1. uniapp动态修改导航栏

    1.修改导航栏buttons 如图动态修改角标 <template> <view> </view> </template> <script> ...

  2. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  3. iOS 动态修改导航栏颜色 UINavigationBar

    示例 所谓动态修改  意思是 在当前页面滚动的过程中 亦或 是在 触发返回事件\进入一个新的页面  导航栏的动态变化 由于系统级别的navBar 高度集成  很多自己想实现的功能 很不好弄 如果是通过 ...

  4. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  5. 前端开发教程:使用 CSS3 Transforms 构建圆形导航

    在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航.教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式.不过不用担心,这里用到的数学知识真的是很简单的.教程使用 ...

  6. CSS3特效----制作立体导航栏菜单

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...

  7. iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能

    emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...

  8. uni-app nvue页面动态修改导航栏按钮

    话不多说上代码 let pages = getCurrentPages() let page = pages[pages.length - 1]; let currentWebview = page. ...

  9. 动态导航栏和JavaScript箭头函数

    动态导航栏和JavaScript箭头函数 今天我们来写一下动态的导航栏,并且学一下JavaScript的箭头函数等相关问题. 样式如下所示: html中执行代码如下所示: <!DOCTYPE h ...

随机推荐

  1. POJ 1363 Rails

    Rails Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 21728   Accepted: 8703 Descriptio ...

  2. HMM MEMM & label bias

    (http://blog.csdn.net/xum2008/article/details/38147425) 隐马尔科夫模型(HMM): 图1. 隐马尔科夫模型 隐马尔科夫模型的缺点: 1.HMM只 ...

  3. mysql 学习碎片

    1.mysql 中执行 sql字符串 set @strSql='select 1200 as item'; prepare select_sql from @strSql; execute selec ...

  4. 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 ...

  5. js判定IE

    var ie=!-[1,]; 这句话对于多数前端来说都很熟悉,遇到判定是否是ie浏览器就用这个,但是对于由来以及为什么可能没有深入了解过. 短短6个bytes就做了判定.这个表达式是利用IE和标准浏览 ...

  6. 转:C#中String类的几个方法(IndexOf、LastIndexOf、Substring)

    String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. ...

  7. 解决msgfmt无法使用的问题

    参考: http://blog.sina.com.cn/s/blog_4fb490ff0100csne.html http://linux.die.net/man/1/msgfmt http://pa ...

  8. Linux - Yum的常用方法总结

    简述 rpm是由红帽公司开发的软件包管理方式,使用rpm可以方便的进行软件的安装.查询.卸载.升级等工作. 但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时. Yum(全称 ...

  9. [Python]同是新手的我,分享一些经验

    本来想分享一些知识,但是发现,写着写着,感觉分享一些经验,或许会少让大家走一些弯路,索性就把标题一改. 我不是教给大家些什么,我没有资格,我也是摸着石头过河,我只是本着分享的精神,在这里分享自己的东西 ...

  10. 利用百度词典API和Volley网络库开发的android词典应用

     关于百度词典API的说明,地址在这里:百度词典API介绍 关于android网络库Volley的介绍说明,地址在这里:Android网络通信库Volley 首先我们看下大体的界面布局!