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 ...
随机推荐
- decimal.ToString("#0.00")与decimal.ToString("#.##")的区别
decimal decTemp = 2.1m; Console.WriteLine(decTemp.ToString("#0.00")); //输出2.10 Console.Wri ...
- 安装oracle常见问题分析
1,之前已经安装过软件,卸载不完全 /tmp/.oracle /tmp/ora* /var/tmp/ora* /etc/ora* 2,安装介质权限或者本身就有问题 3,oracle用户 $/HOME/ ...
- vuex requires a Promise polyfill in this browser.--ie-vue-兼容处理日记
1.ie9+报错vuex requires a Promise polyfill in this browser. 解决如下: npm install --save-dev -polyfill 修改c ...
- LRJ入门经典-0905邮票和信封305
原题 LRJ入门经典-0905邮票和信封305 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 假定一张信封最多贴5张邮票,如 ...
- 研究一些复杂java开源软件代码的体会(转)
原文地址:http://herman-liu76.iteye.com/blog/2349026 有时候看源代码是非常有趣的事情,象是思考游戏,象是思考棋局... 平时做J2EE项目中, ...
- Android学习笔记(23):列表项的容器—AdapterView的子类们
AdapterView的子类的子类ListView.GridView.Spinner.Gallery.AdapterViewFlipper和StackView都是作为容器使用,Adapter负责提供各 ...
- iOS8开发~Swift(五)Swift与OC混编
一.概要 首先看<The Swift Programming Language>中提到"Swift's compatibility with Objective-C lets y ...
- microsoft SQL server,错误2
大二下開始学习数据库,一開始就把数据库装了,结果数据库第一节实验课就是教我们装数据库,而且要在自己机子上装,还要实验报告和截图.老师叫我把原本的卸载掉, 于是对着网上一系列的操作卸载server删除目 ...
- 想学android进来看看吧~ ~
我深知学校里面有非常多同学想学习新的知识,而苦于没有指导. 事实上我想说的是,非常多东西须要靠自己,须要借助度娘,谷歌的.当然有人指导是最好的了. 对于刚接触android是不是也想做出像以下的效果: ...
- 深入分析JavaWeb Item23 -- jsp自己定义标签开发入门
一.自己定义标签的作用 自己定义标签主要用于移除Jsp页面中的java代码. 二.自己定义标签开发和使用 2.1.自己定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 要编写一 ...