核心问题：

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. 全中国的省市县镇乡村数据获取以及展示java源代码

    第一步.准备工作(数据源+工具): 数据源(截止目前最全面权威的官方数据):http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2013/ 爬取数据的工具 ...

  2. Ubuntu下的防火墙

    Ubuntu下的防火墙Gufw-ufw Gufw是ufw的桌面版本,网上有Gufw的安装和配置方法,但是我认为并不是很好.网上的教程也有点愚弄大众的嫌疑,因为按照他的说法,最后防火墙根本就无法自动启动 ...

  3. struts2 using kindeditor upload pictures (including jmagic compressed images)

    Project uses a kindeditor3.4 UploadContentImgAction @SuppressWarnings("serial") @ParentPac ...

  4. Debian 基本设置

    在此做一下记录,省得以后再老是去搜索了 我的debian版本v:8.1.0 我是在Hyper-V中装的,启动后一直ping不通网址,后来才知道Debian不能直接ping域名,只能ping IP... ...

  5. [转]C# 文本框只能输入数字

    调用TextBox的KeyPress事件 private void txtUserId_KeyPress(object sender, KeyPressEventArgs e){ //如果输入的不是数 ...

  6. 快速开发~Rafy框架的初步认识

    当我们开始使用EF的同时,是不是就会更好的认识了其他的ORM框架,最近接触了Rafy的使用,感觉还是蛮有兴趣去学习的,虽然最初的我到现在看的并不深入,但是我个人感觉还是可以简单地做一些总结的啦,或许语 ...

  7. LoRaWAN移植笔记(一)__RTC闹钟链表的实现

    近日在阅读semtech的Lora-net/LoRaMac-node.此代码是LoRaWAN MAC层的node段的代码. 此代码中构建了一个定时器链表,此链表构建得非常的巧妙,现在和大家分享. 此定 ...

  8. 受限玻尔兹曼机（RBM）学习笔记（六）对比散度算法

      去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算 ...

  9. ecshop的Mysql操作类

    摘要,这是直接摘抄的ecshop的mysql操作类:不过他这里的缓存是用的文件缓存,我们如果想直接使用,可以替换成memcache的或者redis的! <?php /** * ECSHOP MY ...

  10. 为了去重复，写了一个通用的比较容器类，可以用在需要比较的地方，且支持Lamda表达式

    为了去重复,写了一个通用的比较容器类,可以用在需要比较的地方,且支持Lamda表达式,代码如下: public class DataComparer<T>:IEqualityCompare ...