核心问题：

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. iOS SDK Release Notes for iOS 9 iOS9 SDK 版本更新说明

    Important: This is a preliminary document for an API or technology in development. Apple is supplyin ...

  2. MMO之禅（二）职业精神

    MMO之禅(二)职业精神 --心态 目标 信仰 Zephyr 201304 继续上篇,继续讲什么?打了很多腹稿点滴,从引擎架构,到上层数据.逻辑模块规划,想了很多,临起笔,却总发觉四顾心茫然,乱不可言 ...

  3. python 字符串查找

    python 字符串查找有4个方法,1 find,2 index方法,3 rfind方法,4 rindex方法. 1 find()方法: )##从下标1开始,查找在字符串里第一个出现的子串:返回结果3 ...

  4. Ajax请求WebService跨域问题 [转载]

    1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容 ...

  5. 【转载】solr初体验

    [1]http://cxshun.iteye.com/blog/1039445 由于工作原因,这段时间接触到solr,一个基于lucene的企业级搜索引擎.不怎么了解它的童鞋可以去GOOGLE一下. ...

  6. 用MapX与C#开发地理信息系统

    转:http://www.cnblogs.com/dachie/archive/2010/08/17/1801598.html 第四章 MapX与C#实例... 5 4.1 MapX图层建立... 5 ...

  7. dSYM atos crash log 定位到代码行的方法(转)

    做iOS开发的时候,常常会遇到crash,需要分析call stack的时候.有时候App在别人的设备崩溃,把crash report在自己的机器上打开,Xcode没有自动的进行符号化.这时候就需要自 ...

  8. DDD：Strategic Domain Driven Design with Context Mapping

    Introduction Many approaches to object oriented modeling tend not to scale well when the application ...

  9. UITextField-secureTextEntry

    1.UITextFiled的密文输入   secureTextEntry  安全文本输入  secure:安全  Entry:入口

  10. Linux下中文显示乱码问题

    Linux下中文显示乱码问题 输出编码选utf-8 然后文件本身编码也要是utf-8