CSS3之边框样式（动画过渡）

来源：互联网发布：淘宝使用的数据库编辑：程序博客网时间：2024/05/30 04:50

简述

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.csdn.net/liang19890820">一去丶二三里</a> </li>  </ul></body></html>

2 0