第一次写博客，心里竟然有点感动，注册了两个月了，一直不敢写，总觉得这应该是大神交流的地方。今天写的一个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. 161019、并发容器ConcurrentHashMap

    java.util.concurrent.ConcurrentMap<K, V>一种是用读写锁实现Map的方法.此种方法看起来可以实现Map响应的功能,而且吞吐量也应该不错.但是通过前面对 ...

  2. js 如何生成唯一且不可预测的 ID

    通常数据库可以生成唯一的 ID,最多的就是数字序列,也有像 MongoDB 这样产生组合序列的,不过这种形式的 ID 由于是序列,是可以预测的.如果想得到不可预测且唯一的 ID,方法还是有的. 下面主 ...

  3. 如何用javascript 的eval动态执行一个需要传对象参数的函数

    代码如下: var method = 'setRiskItemAmount_'+id[1]+'(id[0],id[2],this.value);'; console.log(method); eval ...

  4. php中的curl】php中curl的详细解说

    本文我来给大家详细介绍下cURL的简单的使用方法,下文我将会给大家详细介绍cURL的高级应用, cURL可以使用URL的语法模拟浏览器来传输数据, FTP, FTPS, HTTP, HTTPS, GO ...

  5. POSTGRESQL9.5之pg_rman工具

    pg_rman是一款专门为postgresql设计的在线备份恢复的工具.其支持在线和基于时间点备份方式,还可以通过创建backup catalog来维护DB cluster备份信息. 看起来好像是模仿 ...

  6. mha的搭建步骤(一主一从架构)

    所需脚本文件到这里下载:http://note.youdao.com/share/web/file.html?id=ae8b11a61f7a8aa7b52aac3fcf0c4b83&type= ...

  7. Java 中日期的几种常见操作 —— 取值、转换、加减、比较

    Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提 ...

  8. [ios][swift]swift GPS传感器的调用

    在Info.plist文件中添加如下配置:(1)NSLocationAlwaysUsageDescription(2)NSLocationWhenInUseUsageDescription swift ...

  9. ACM题目————次小生成树

    Description 最小生成树大家都已经很了解,次小生成树就是图中构成的树的权值和第二小的树,此值也可能等于最小生成树的权值和,你的任务就是设计一个算法计算图的最小生成树. Input 存在多组数 ...

  10. java 抽象类和接口的区别

    抽象类 特点: 1.抽象类中可以构造方法 2.抽象类中可以存在普通属性,方法,静态属性和方法. 3.抽象类中可以存在抽象方法. 4.如果一个类中有一个抽象方法,那么当前类一定是抽象类:抽象类中不一定有 ...