核心问题：

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. 用对 gitignore

    使用 git 做代码管理工具时,设置 gitignore 是必不可少的流程,一些系统或者 IDE 会在目录下生成与项目不相关的文件,而这些文件我们不期望被提交到仓库之中.理解 gitignore 的 ...

  2. CLR via C#深解笔记二 - 类型设计

    类型基础 所有类型都从System.Object派生   CLR要求所有对象都用new 操作符来创建. Employee e = new Employee("Constructor Para ...

  3. 【Java设计模式】单例模式

    ### 1. 概述> 单例模式是确保某一个类中有且只有一个实例. ----------### 2. 饿汉式单例``` javapublic class SingletonInstance { p ...

  4. Qt Error: dependent '..\***' does not exist.

    大概意思:所依赖的资源不存在. 实际上是工程找不到所依赖的资源. 本人的解决方案(可能拙劣,也不一定是正道):将资源拷贝到工程目录下.

  5. [转]Handy adb commands for Android

    转自:http://www.growingwiththeweb.com/2014/01/handy-adb-commands-for-android.html View connected devic ...

  6. `cocos2dx非完整` 日志模块 增量更新

    在上一篇文章中,说到了"流程"的由来,以及我对流程的使用. 这一片就是对流程的应用.前一篇文章中说到了三条流程 check_log_measure, check_env_measu ...

  7. java模仿qq好友面板的布局（BoxLayout问题）

    .............. JLabel ll = new JLabel(dlg.getNameText() + ":" + dlg.getIPText(), ii[index] ...

  8. DDD：聊天笔记

    聚合跟和实体 聚合根是实体. 实体有生命周期,使用标识进行跟踪. 聚合根是全局标识,由仓储或其它服务负责其生命周期. 实体是局部标识,由聚合根负责其生命周期. 为什么能应对复杂度? 纵向.横向.时间维 ...

  9. 移动端 ios 长按复制兼容方案

    移动端页面,需要复制一段文字码. 在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域, 把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的! 举个例子: 如下图: 1 ...

  10. Linux用户组管理

    用户组信息存放:/etc/group 当组内只有一个用户,并且用户名和用户组名一致时默认不显示:组号1-499是系统预留的用户组,>=500的用户组是管理员手动创建的,组密码占位符用x表示   ...