核心问题：

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. [Z] 计算机类会议期刊根据引用数排名

    一位cornell的教授做的计算机类期刊会议依据Microsoft Research引用数的排名 link:http://www.cs.cornell.edu/andru/csconf.html Th ...

  2. POJ 1363 Rails

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

  3. C++的ORM工具比较

        用过Java的都知道SSH框架,特别对于数据库开发,Java领域有无数的ORM框架,供数据持久层调用,如Hibernate,iBatis(现在改名叫MyBatis),TopLink,JDO,J ...

  4. how to create a framework for ios . cool!

    预热. http://www.raywenderlich.com/65964/create-a-framework-for-ios http://insert.io/framework-ios8-xc ...

  5. SVN上传代码

    概述 SVN上传代码 使用SVN工具上传代码到新浪SAE 1.下载SVN工具http://tortoisesvn.net/downloads.html 2.创建一个文件夹,Checkout,输入SAE ...

  6. ruby -- 基础学习（一）项目文件夹说明

    App文件夹子文件夾功能介绍 (1)controllers  存放驱动业务逻辑的控制器 (2)helpers       存放视图辅助类,一些常用的代码段 (3)mailers       Rails ...

  7. ruby -- 问题解决（六）link_to to destroy not working

    在Rails的development环境下开发时,使用link_to进行destroy时顺利进行,最近将环境配置成production时,使用link_to,结果not working 代码如下: & ...

  8. Java -- 获取当前日期、当月月初日期、月末日期

    Learn From:http://blog.csdn.net/sunhuwh/article/details/39161323 public class CalendarTest { public ...

  9. 【转载】Debian 6安装小记

    转载自:http://unix-cd.com/vc/www/22/2011-06/18022.html 今天终于装上了 debian6,代号叫squeeze是吧?前几天的时候在Microhu’s Bl ...

  10. 【转载】ubuntu和debian环境下无法挂载vmware虚拟机共享目录的解决办法

    转载自:http://www.fengfly.com/plus/view-210022-1.html 第一步,安装VMware Tools 打开虚拟机ubuntu(debian原理一样)后,首先,点击 ...