第一次写博客，心里竟然有点感动，注册了两个月了，一直不敢写，总觉得这应该是大神交流的地方。今天写的一个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. E2PROM与Flash的引脚图

    E2PROM(24C02):

  2. sql server 2012 自定义聚合函数(MAX_O3_8HOUR_ND) 计算最大的臭氧8小时滑动平均值

    采用c#开发dll,并添加到sql server 中. 具体代码,可以用visual studio的向导生成模板. using System; using System.Collections; us ...

  3. sql中的小细节

    1.SUM与COUNT的区别 SUM是对符合条件的记录的数值列求和 COUNT 是对查询中符合条件的结果(或记录)的个数 2 select name as 姓名,tel  from...where.. ...

  4. PHP正则表达式之定界符和原子介绍

    1,正则表达式的定界符. 除了字母.数字和反斜线\以外的任何字符都可以为定界符号,比如 | |.//.{}.!!等等,但是需要注意,如果没有特殊需要,我们都使用正斜线//作为正则表达式的定界符号. 2 ...

  5. mysql使用索引扫描来做排序

    mysql有两种方式可以生成有序的结果,通过排序操作或者按照索引顺序扫描,如果explain的type列的值为index,则说明mysql使用了索引扫描来做排序(不要和extra列的Using ind ...

  6. android内存优化相关1

    第一种策略,是释放显示相关的内存.这是我们针对系统APP采用的一种调优策略. 图形内容,俗称位图是非常占用内存的,针对位图,我们采用异步加载的方法,将位图内容信息和位图的状态信息分别进行存储,将内容信 ...

  7. SIM卡应用-OPN，PLMN，SPN

    SIM卡应用 移动运营商已经将SIM卡用於很多不同的应用,下面列出了其中最主要的应 用∶ ·漫游应用∶确保手机可以在漫游之後选择缺省的运营商网络.一个SIM应用是可以在手机漫游到某个合作夥伴运营商网络 ...

  8. Unity-Animator深入系列---StateMachineBehaviour状态机脚本学习

    回到 Animator深入系列总目录 首先这个脚本必须继承自StateMachineBehaviour public class MySMB : StateMachineBehaviour { pub ...

  9. C#获得枚举类型的长度

    enum MyEnum { Value1, Value2, } class Program { static void Main(string[] args) { var e = new MyEnum ...

  10. 某些输入文件使用或覆盖了已过时的 API

    android出现注: 某些输入文件使用或覆盖了已过时的 API. 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译. 注: 某些输入文件使用了未经检查或不安全的操作. 注 ...