css3实现动态圆形导航栏
核心问题：
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实现动态圆形导航栏的更多相关文章
- uniapp动态修改导航栏
1.修改导航栏buttons 如图动态修改角标 <template> <view> </view> </template> <script> ...
- css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
- iOS 动态修改导航栏颜色 UINavigationBar
示例 所谓动态修改 意思是 在当前页面滚动的过程中 亦或 是在 触发返回事件\进入一个新的页面 导航栏的动态变化 由于系统级别的navBar 高度集成 很多自己想实现的功能 很不好弄 如果是通过 ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- 前端开发教程：使用 CSS3 Transforms 构建圆形导航
在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航.教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式.不过不用担心,这里用到的数学知识真的是很简单的.教程使用 ...
- CSS3特效----制作立体导航栏菜单
使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...
- iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能
emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...
- uni-app nvue页面动态修改导航栏按钮
话不多说上代码 let pages = getCurrentPages() let page = pages[pages.length - 1]; let currentWebview = page. ...
- 动态导航栏和JavaScript箭头函数
动态导航栏和JavaScript箭头函数 今天我们来写一下动态的导航栏,并且学一下JavaScript的箭头函数等相关问题. 样式如下所示: html中执行代码如下所示: <!DOCTYPE h ...
随机推荐
- 安卓开发笔记——关于照片墙的实现（完美缓存策略LruCache+DiskLruCache）
这几天一直研究在安卓开发中图片应该如何处理,在网上翻了好多资料,这里做点小总结,如果朋友们有更好的解决方案,可以留言一起交流下. 内存缓存技术 在我们开发程序中要在界面上加载一张图片是件非常容易的事情 ...
- ubuntu安装php mcrypt扩展
1.安装扩展 sudo apt-get install php5-mcrypt 2.添加扩展配置文件 apt-get没有在/etc/php5/cli/conf.d/和/etc/php5/fpm/con ...
- 【Android】Kill Service
花了一天时间对如何Android保证Service不被杀死研究了一下,我的手机是Nexus5,系统4.4.2. 杀死一个Service通常有以下几种可能: 1)APP自己杀死(包括调用stopServ ...
- Quiz（贪心，快速幂乘）
C. Quiz time limit per test 1 second memory limit per test 256 megabytes input standard input output ...
- (译)ECMAScript 5 Objects and Properties (二)
继 (译)ECMAScript 5 Objects and Properties 全文地址 http://ejohn.org/blog/ecmascript-5-objects-and-propert ...
- Unity 全面理解加载和内存管理
最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Resources.Load,一是通过AssetBundle,其实两者本质上我理解没有什么区别.Resources ...
- 【转载】Linux i386+源码中常见宏标识tag的定义
转载自:http://blog.chinaunix.net/uid-20729583-id-1884553.html 这 些宏包括 __init.__initdata.__initfunc().asm ...
- IT人的自我导向型学习：学习的1个理念和2个心态
本文更新版本已挪至 http://www.zhoujingen.cn/blog/2484.html ----------------------------- 写这一个系列之前,我定位是与高效学习有 ...
- Mysql学习笔记（十二）触发器
学习内容: 1.触发器: 什么是触发器?我们什么时候能够使用触发器? 触发器就是用来监听某个表的变化,当这个表发生变化的时候来触发某种操作..比若说两个表是相互关联的,当我们在对其中一个表格进行操 ...
- 对于大于8046 bytes的行，RCSI/SI事务隔离级别无效
自SQL Server 2005起,我们有了READ COMMITTED SNAPSHOT ISOLATION level (RCSI) 和SNAPSHOT ISOLATION level (SI)两 ...