第一次写博客，心里竟然有点感动，注册了两个月了，一直不敢写，总觉得这应该是大神交流的地方。今天写的一个css3的一个导航，觉得挺好看，放在网页里，也可以起到一个点睛之笔的作用。

首先写好body标签中的基本导航元素

然后是style标签中css的部分：

transition中 all 表示是css的所有属性都进行transition这个过渡，linear 是过渡方式，表示过渡一直是以一个速度来进行。 ease-out 也是过渡方式，表示先快，后越来越慢慢。

这是最后的实现的效果：

CSS3关于transition过渡的更多相关文章

  1. 【CSS3】transition过渡和animation动画

    转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...

  2. css3的transition过渡

    从*开始样式*,经过指定*时间*后,缓慢过渡到*结束样式* 语法:transition:要变化的属性名 持续时间 速度变化类型 延迟 强调:写在开始样式中 如何实现多个属性同时过渡:2种办法: 1. ...

  3. css3中的过渡（transition）

    css3 transition(过渡)1.语法: transition:[ transition-property ] || [ transition-duration ] || [ transiti ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

    CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...

  5. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  6. CSS3属性transition

    CSS3 Transitions 指定过渡 语法: transition: property duration timing-function delay;     参数一: transition-p ...

  7. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. CSS3 动画及过渡详解

    今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...

  9. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

随机推荐

  1. Github上PHP资源汇总大全，php学习的好资料

    Github上PHP资源汇总大全,php学习的好资料 国外程序员ziadoz 在Github上收集整理了PHP的各种资源,内容包括模板.框架.数据库.安全等方面的库和工具.汇总了各种PHP资源,供各位 ...

  2. IntelliJ IDEA---java的编译工具【转】

    转自:http://baike.baidu.com/link?url=sEpS0rItaB9BiO3i-qCdGSYiTIVPSJfBTjSXXngtN2hBhGl1j36CYQORKrbpqMHqj ...

  3. NEON在Android中的使用举例【转】

    转自:http://blog.csdn.net/fengbingchun/article/details/37766607 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.  打开Eclip ...

  4. 设置eclipse补全方法

    开MyEclipse 6.0. 1,然后“window”→“Preferences” 2,选择“java”,展开,“Editor”,选择“Content Assist”. 3,选择“Content A ...

  5. C# winform 中MessageBox用法大全（附效果图） （转载+说明）

    声明:这篇文章是转载的转载的,由于原作者的博客被关闭 我就不再列出了,提前先说明下,if语句中的判断有些太长,建议提前声明一个变量, DialogResult MsgBoxResult;        ...

  6. HDU 3966：Aragorn's Story（树链剖分）

    http://acm.hdu.edu.cn/showproblem.php?pid=3966 题意:有n个点n-1条边,每个点有一个权值,有两种操作:询问一个点上权值是多少和修改u到v这条链上的权值. ...

  7. HDU 2767：Proving Equivalences（强连通）

    http://acm.hdu.edu.cn/showproblem.php?pid=2767 题意:给出n个点m条边,问在m条边的基础上,最小再添加多少条边可以让图变成强连通.思路:强连通分量缩点后找 ...

  8. hdwiki 在IIS 下的伪静态

    HDwiki有SEO设置的功能,此功能可以将HDwiki的页面进行URL静态化转换,从而使HDwiki内容更容易被搜索引擎挖掘,提高被收录的机率.注意事项        1.本功能对服务器环境有特殊要 ...

  9. [c++][语言语法]stringstream iostream ifstream

    c++中ifstream一次读取整个文件 读取至char*的情况 std::ifstream t; int length; t.open("file.txt"); // open ...

  10. Python中的变量、引用、拷贝和作用域

    在Python中,变量是没有类型的,这和以往看到的大部分编辑语言都不一样.在使用变量的时候,不需要提前声明,只需要给这个变量赋值即可.但是,当用变量的时候,必须要给这个变量赋值:如果只写一个变量,而没 ...