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>CSS3之边框样式（动画过渡）的更多相关文章
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3实现边框线条动画特效
<div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- 常用到用css3实现的转换，过渡和动画
为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
随机推荐
- 7件你不知道但可以用CSS做的事
不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...
- Long和Date数据类型之间相互转换代码 - 调整时间推前往后，截取long型日期方法。
SimpleDateFormat DATETIME_SEC_STR = new SimpleDateFormat("yyyyMMddHHmmss"); SimpleDateForm ...
- 利用dsniff的tcpkill杀TCP连接
利用dsniff的tcpkill杀TCP连接 Linux连接久久不能释放的现象不常见,但偶然也会发生.进程虽不复存在,但是客户端的连接咬定青山不放松,死活也不肯吐出连接,导致重启进程时因操作系统判断监 ...
- React Native 简介：用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- 解决JS文件页面加载时的阻塞
关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...
- iOS第三方语音－讯飞语音
官方网站:http://www.xfyun.cn/ 注册还要绑定微信,坑啊,识别率感觉没得微信语音好,但是微信语音审核一直不过,研究下这个 1.下载sdk,主要就下面几个文件,我主要用的是语音识别
- IOS第三方地图－百度地图集成
百度地图官网: http://developer.baidu.com/map/index.php?title=iossdk 照上面吧百度地图sdk集成到工程 然后在pilst文件中加入: 如果地图没有 ...
- linux下tigervnc-servere服务的安装与使用
关于tigervnc-servere的安装,可以直接使用本地yum源进行安装. [root@ ~]# yum install tigervnc-server -y 其中tigervnc的主要配置文件位 ...
- CreateProcess启动隐藏的外部程序（其实就是CreateDesktop，然后指定STARTUPINFO.lpDesktop）
HDESK hDesk = CreateDesktop(_T("MyDesk"), NULL, NULL, 0, GENERIC_ALL, NULL); ASSERT(hDesk) ...
- Android TabHost中Activity之间传递数据
例子1: TabHost tabhost = (TabHost) findViewById(android.R.id.tabhost); tabhost.setup(this.getLocalActi ...