CSS3 之边框样式(动画过渡)

简述

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>
展开阅读全文
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值