简述

CSS3中transition属性定义了过渡，我们可以使用它来辅助我们实现一个边框样式的动画过渡。

transition

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

语法

transition: property duration timing-function delay;

值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒
transition-timing-function 规定速度效果的速度曲线
transition-delay 定义过渡效果何时开始

实现

效果

源码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type='text/css'>

/* 动画过渡 */

#main_menu a, #main_menu li {

  -webkit-transition: all 0.4s ease-in-out 0s;

  -moz-transition: all 0.4s ease-in-out 0s;

  -o-transition: all 0.4s ease-in-out 0s;

  -ms-transition: all 0.4s ease-in-out 0s;

  /* 动画效果

      all：所有属性都将获得过渡效果

      0.4s：完成过渡效果需要花费的时间

      ease-in-out：规定以慢速开始和结束的过渡效果

      0s：规定过渡效果何时开始

  */

  transition: all 0.4s ease-in-out 0s;

}

/* 划过样式 */

#main_menu li:hover {

  background: #EEE;

  border-style: outset;

  border-color: rgb(34, 177, 76);

}

/* 正常样式 */

#main_menu li {

  list-style: none;

  border: 3px outset #AAA;

  margin: 10px;

  background: #AAA;

}

</style>

</head>

<body>

  <ul id="main_menu">

    <li><a href="http://www.googto.com/">Googto</a></li>

    <li><a href="https://www.hao123.com/">hao123</a></li>

    <li><a href="http://blog.csdn.net/liang19890820">一去丶二三里</a> </li>

  </ul>

</body>

</html>

CSS3之边框样式（动画过渡）的更多相关文章

  1. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. CSS3实现边框线条动画特效

    <div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...

  3. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  4. 常用到用css3实现的转换，过渡和动画

    为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...

  5. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  6. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  7. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  8. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  9. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

随机推荐

  1. HDOJ 1466 计算直线的交点数

    将n 条直线排成一个序列,直线2和直线1最多只有一个交点,直线3和直线1,2最多有两个交点,......,直线n 和其他n-1条直线最多有n-1个交点.由此得出n条直线互不平行且无三线共点的最多交点数 ...

  2. 用vs2010 编写C语言程序，VS2010 C++编译报错LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    编译mongodb-src-r2.2.2出现以下问题 LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏   这个是由于日志文件引起的,可以将 项目\ ...

  3. .net 类型源码下载地址

    原文:http://www.cnblogs.com/ProJKY/p/SSCLI.html 一般场景下,采用 Reflector可以反射出.NET 的部分实现出来,可以拿来参考,但和微软公开的SSCL ...

  4. 条件随机场CRF简介

    http://blog.csdn.net/xmdxcsj/article/details/48790317 Crf模型 1.   定义 一阶(只考虑y前面的一个)线性条件随机场: 相比于最大熵模型的输 ...

  5. HTML5 canvas 绘图步骤

    1.先把canvas选出来,不选出来你往哪儿画! var oCan=  document.getElementById('xxx'); 2.声明基于 canvas 的context对象,没他你怎么调用 ...

  6. delphi 中几种多线程操作方式

    在了解多线程之前我们先了解一下进程和线程的关系 一个程序至少有一个主进程,一个进程至少有一个线程. 为了保证线程的安全性请大家看看下面介绍 Delphi多线程同步的一些处理方案大家可以参考:http: ...

  7. HDU2829 Lawrence(斜率优化dp)

    学了模板题之后上网搜下斜率优化dp的题目,然后就看到这道题,知道是斜率dp之后有思路就可以自己做不出来,要是不事先知道的话那就说不定了. 题意:给你n个数,一开始n个数相邻的数之间是被东西连着的,对于 ...

  8. ZOJ3717 Balloon(2-SAT)

    一个很玄乎的问题,但听到2-SAT之后就豁然开朗了.题目的意思是这样的,给你n个点群,每个点群里面有两个点,你要在每个点群里面选一个点,以这些点做半径为r的圆,然后r会有一个最大值,问的就是怎么选这些 ...

  9. POJ 1665

    #include<iostream>//chengdacaizi 08.11.12 #include<iomanip> #define p 3.1415927 using na ...

  10. ThreadPoolTaskExecutor异步的处理报警发送邮件短信比较耗时的东东

    package com.elong.ihotel.util; import org.springframework.beans.factory.DisposableBean; import org.s ...