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 转换。
转载于:https://www.cnblogs.com/Neilisme/p/7272942.html
CSS3常用属性及用法相关推荐
- css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
- HTML+CSS+JavaScript复习笔记持更(七)——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
- css3常用属性之表现型
css3的使用已经分布在各种网站上,其用途对于前端开发人员来说有很大的帮助,比如之前的圆角矩形,需要使用背景图片来完成,现在只需使用border-radius:5px;便可以做出圆角边框的效果,今天来 ...
- html边框白色实线rgba,CSS3 RGBA 属性高级用法
这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...
- HTML+CSS+JavaScript复习笔记持更(十)——CSS3常用属性之定位
定位 定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...
- HTML+CSS+JavaScript复习笔记持更(九)——CSS3常用属性之盒模型
盒模型 盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性 内边距:padding 外边距:margin 边框:bord ...
- HTML+CSS+JavaScript复习笔记持更(六)——CSS3常用属性之文本
文本相关 文本相关,包含了文字样式和文本换行等格式 文字 文字是一个网页最基础的部分,文字主要有以下几种属性: 字体 文字大小 文字颜色 水平对齐方式 段首缩进方式 语法格式: <!DOCTYP ...
- CSS3 新属性 cacl()用法解析
这是一个会计算的属性,特别适合对于自适应还不是很熟练的童鞋! calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin. ...
- HTML+CSS+JavaScript复习笔记持更(八)——CSS3常用属性之列表
列表属性 之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...
最新文章
- linux终端中如何对目录压缩,软网推荐:Linux中使用命令行查看压缩文档
- tostring 16进制_ToString:身份哈希码的十六进制表示形式
- twisted系列教程七–小插曲,延迟对象
- 使用Jenkins配置自动化构建
- [转载] [python标准库]math——数学函数
- linux(Ubuntu)下安装英伟达的显卡驱动、cuda和cudnn详细步骤
- python代替shell脚本_自动化shell脚本except与python的pexpect模块
- Python基础教程(第2版•修订版)代码清单2-3 勘误
- H264中4x4、8x8和16x16尺寸对应场景
- 2021 美赛时间安排表
- java定义一个eat方法,java基础5实战开发Day2/方法/2020-04-26
- eating的中文意思_eating什么意思
- 微信小程序使用MQTT远程控制单片机——阿里云物联网平台
- 10分钟上手pythonpandas_【译】10分钟学会Pandas
- Jave概述及变量总结
- Python numpy.atleast_2d函数方法的使用
- 博云:Kubernetes 近年影响最大版本发布,这几点值得关注
- 大数据需要数学好吗?
- Java基础-编写问候语-“Hello World”
- MathType编辑钢筋符号就是这么简单
热门文章
- 登陆SharePoint站点出现service unavailable----Http错误503
- sencha touch 手势识别左右滑动
- 理解杀毒软件技术的意义 脱壳、虚拟、启发式介绍
- koa --- [MVC实现之一]自定义路由读取规则
- es6 --- forEach的实现
- es6 --- set实现并集(Union)、交集(Intersect)和差集(Difference)
- Java Web 请求转发与请求重定向
- Shift键关闭大小写
- NDK 编译armebai-v7a的非4字节对齐crash Fatal signal 7 (SIGSEGV) 错误解决
- php代码上线,实现版本切换