第一次写博客，心里竟然有点感动，注册了两个月了，一直不敢写，总觉得这应该是大神交流的地方。今天写的一个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. Quartz集群原理及配置应用

    1.Quartz任务调度的基本实现原理 Quartz是OpenSymphony开源组织在任务调度领域的一个开源项目,完全基于Java实现.作为一个优秀的开源调度框架,Quartz具有以下特点: (1) ...

  2. centos7.1-64bit延时截屏

    centos自带了截屏的软件,而且还能延时截屏. 在桌面左上角的应用程序菜单里: “应用程序”->“工具”->“截图” 设定延时秒数,点击“截图”按钮,开始截图. 完.

  3. PHP建站通过服务器架构及实战的方法

    PHP的环境搭建 PHP的帮助使用和配置文件 PHP的Hello World PHP的库函数调用 PHP的Web程序 PHP的函数和面向对象使用 PHP的数据库访问 Nginx安装和配置访问 Word ...

  4. Redis的使用完整版

    [Redis基本] 1.redis安装完成后的几个文件: redis-benchmark  性能测试工具(批量写入)./bin/redis-benchmark -n 10000  即可一次性写入100 ...

  5. ectouch第五讲 之表

    Ectouch本身相关的表 17个ecs_touch_activity[touch优惠活动扩展表] 优惠活动的自增id 取值ecs_favourable_activity表cat_id,给优惠活动加b ...

  6. SQLServer学习笔记<>.基础知识,一些基本命令,单表查询(null top用法,with ties附加属性,over开窗函数),排名函数

    Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下:   ...

  7. hdwiki 软件包结构

    HDWiki软件包结构转载自http://www.chinabaike.com/z/shenghuo/pc/2011/0414/814308.html           根目录下的PHP文件     ...

  8. [Unity3D]unity3d5.0简单的调用摄像头

    Unity3D中新建一个工程,加一个Plane,新建一个C# 脚本,将这个脚本添加到Plane上,调用摄像头.(如果显示的图片居然是翻转的,Plane的Rotation 值就可以了) 以下是脚本内容: ...

  9. 用canvas画时钟

    效果图在博客首页上. html: <canvas id="canvas" >Your browser does not support canvas</canva ...

  10. 每日一九度之题目1016：火星A+B

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5346 解决:1464 题目描述:     读入两个不超过25位的火星正整数A和B,计算A+B.需要注意的是:在火星上,整数不是单一进制的, ...