CSS3之边框样式（动画过渡）-优快云博客

简述

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

简述
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.youkuaiyun.com/liang19890820">一去丶二三里</a> </li>
  </ul>
</body>
</html>