CSS3常用属性及用法
1.transition: 过渡属性,可以替代flash和javascript的效果
兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
Chrome 25 以及更早的版本,需要前缀 -webkit-。
Safari 需要前缀 -webkit-。
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
} 公司**圆桌用的是 transition: all .2s ease-out; 2.animation属性
兼容性:Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
Internet Explorer 9 以及更早的版本不支持 animation 属性。
公司 脑洞用的是 -webkit-animation: fade_in_left 3s infinite ease-in-out;
@keyframes fade_in_left
{
0% {transform: translateX(-20px);}
50% {transform: translateX(0);}
100% {transform: translateX(-20px);}
}
@-moz-keyframes fade_in_left /* Firefox */
{
0% {-moz-transform: translateX(-20px);}
50% {-moz-transform: translateX(0);}
100% {-moz-transform: translateX(-20px);}
}
@-webkit-keyframes fade_in_left /* Safari 和 Chrome */
{
0% {-webkit-transform: translateX(-20px);}
50% {-webkit-transform: translateX(0);}
100% {-webkit-transform: translateX(-20px);}
}
@-o-keyframes fade_in_left /* Opera */
{
0% {-o-transform: translateX(-20px);}
50% {-o-transform: translateX(0);}
100% {-o-transform: translateX(-20px);}
}
3.transform
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
兼容性:Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
CSS3常用属性及用法的更多相关文章
- web 开发:CSS3 常用属性——速查手册!
web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- CSS3常用属性
CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...
- CSS3常用属性及效果汇总
本文转载于<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfor ...
- CSS3 RGBA 属性高级用法
这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...
- css3——border-image属性的用法
项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现. 实现;//向外偏移10px,可使边框内部的内容不是那么紧凑border-image-repea ...
- CSS3常用属性浏览器兼容前缀
1.检测网站https://gsnedders.html5.org/outliner/ 2.查询是否支持前缀http://caniuse.com 3.border-radius\box-shadow\ ...
- CSS3 常用属性
1------border-radius (盒子圆角 border-radius :border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 2------如果将一个正方形 ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
随机推荐
- power design设计数据库
power design是收费软件 大致设计流程: 画出概念数据模型,添加实体,连接实体间关系 生成物理数据模型,可以继续在此基础上修改 生成数据库脚本(一个.sql文件),文件中前面是删除表,后面是 ...
- Httpd 文件服务器的搭建
服务器信息 系统: CentOS 安装操作 安装 httpd 直接通过 yum 安装: yum install httpd 安装完成之后,可以检查版本: http 查看版本 httpd -versio ...
- Django_shell命令操作
- PHP CURL HTTPS POST
PHP CURL HTTPS POST function vpost($url,$data){ // 模拟提交数据函数 $curl = curl_init(); // 启动一个CURL会话 ...
- 分享到twitter,facebook,google,yahoo,linkedined,msn
编辑器加载中... 1. 分享到twitter的代码” title=”分享到 Twitter” target=”_blank” rel=”nofollow”>Twitter 2. 分享到Face ...
- WPF中Image控件的Source属性
原文:WPF中Image控件的Source属性 imgBook 是一个Image控件,在后台代码中我想给它指定Source的属性.我先如下方式进行: Uri uri = new Uri(strImag ...
- wampserver-mysql创建数据库
首先打开wampserver,在右下角会出现一个这样的图标,左键单击它,选择MYSQL->MYSQL控制台 输入密码 创建一个新的数据库:create database XXX 注意要输“;”, ...
- 基于Pipe的PureMVC FLEX框架的多核共享消息技术
pipes utilities,也就是所谓的通道(管道),为什么要使用通道呢?模块的结构都是一个单独的puremvc结构,模块和模块,shell和模块之间的通信 不能使用puremvc中的消息进行,因 ...
- Codeforces 429D Tricky Function 近期点对
题目链接:点击打开链接 暴力出奇迹. 正解应该是近期点对.以i点为x轴,sum[i](前缀和)为y轴,求随意两点间的距离. 先来个科学的暴力代码: #include<stdio.h> #i ...
- Visual Studio Set Project Environment Variables
Visual Studio Set Project Environment Variables eryar@163.com In Visual Studio you can specify chang ...