CSS3之transition&transform
参考网页:
CSS3 transform 属性使用详解:
http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/
利用CSS3的transition属性制作过渡效果的导航栏:
http://www.renniaofei.com/code/css3-transition-daohanglan/
无脚本纯CSS3仿苹果选单
http://bbs.lanrentuku.com/thread-11945-1-1.html
transition属性
W3C:http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
transition-property /*指定参与过渡的属性*/
eg.transition-property:backgrond 只指定backgound参与这个过渡
transition-duration /*指定这个过渡的持续时间*/
transition-delay /*延迟过渡时间*/
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier/*过渡类型*/
linear 线性过度 | ease-in 由慢到快 | ease-out 由快到慢| ease-in-out 由慢到快在到慢
eg.-webkit-transition:all 0.5s ease-in
表示的意思:
所有的属性都执行过渡效果,执行时间为0.5秒,过渡动画类型为先慢后快
兼容性:
webkit内核的浏览器(Chrome,Sarari)支持较好
mozilla内核的部分支持
IE不兼容
transform属性
transform本意是变换、改变的意思。
在CSS3中包括三种含义,分别是rotate(旋转)、skew(扭曲)、scale(缩放)。
1.transform-rotate(旋转)
.transform–rotate {
-moz-transform: rotate(10deg); /*顺时针旋转7度。若要逆时针旋转,使用负值*/
-webkit-transform: rotate(10deg);
}
2.transform-rotate(扭曲)
.transform–skew{
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
}
3.transform-rotate(缩放)
.transform–scale {
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
4.transform-translate(移动距离)
eg.
-webkit-transform: rotateX(15deg) scale(1.2) translate(0,10px);
-moz-transform:scale(1.2) translate(0,10px);
兼容性
兼容:Chrome、Firefox、Opera等。
不兼容:IE8以下版本
IE8以下版本
可以通过IE滤镜来实现。代码如下:
<!--[if IE]>
<style>
.transform–rotate {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
right:-15px; top:5px;
}
</style>
<![endif]-->
rotation取值[0,1,2,3],依次代表旋转 [0deg,90deg,180deg,270deg],有关BasicImage滤镜的说明请参考 BasicImage filter。
CSS3之transition&transform的更多相关文章
- css3属性 transition transform
1.transition 译:过渡,转变 可以设置过渡属性 transition: property duration timing-function delay; transition-proper ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
- HTML 学习笔记 CSS3(过度 transition)
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css transition transform animation例子讲解
1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...
- 理解CSS3属性transition
一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...
- css3有趣的transform形变
在CSS3中,transform属性应用于元素的2D或3D转换,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4中类型的形变处理 语法: div{ transform: non ...
随机推荐
- [转]在Node.js中使用RabbitMQ系列一 Hello world
本文转自:https://www.cnblogs.com/cpselvis/p/6288330.html 在前一篇文章中可伸缩架构简短系列中提到过关于异步的问题.当时推荐使用RabbitMQ来做任务队 ...
- 如何调试Javascript代码以及网页代码
做过网页开发的都知道,不过你是用php还是asp.net以及java开发的网站,在开发过程中,web网页展示页面肯定会出现或多或少的问题.这里我推荐使用谷歌浏览器进行Web网页的调试以及错误信息定位. ...
- Jquery闪烁提示特效
样式:.red{ border:1px solid #d00; background:#ffe9e8; color:#d00;} function shake(ele,cls,times){ var ...
- 关于 IdentityServer 部署到生产环境相关问题踩坑记录
Idsr 定义了几种模式适用于不同的场景: // // 摘要: // OpenID Connect flows. public enum Flows { // // 摘要: // authorizat ...
- 【Java基础】4、java中的内部类
内部类的分类:常规内部类.静态内部类.私有内部类.局部内部类.匿名内部类. 实例1:常规内部类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...
- elasticsearch安装之各种坑
我用的是centos6.5,安装elasticsearch5.2.0 首先不说了,安装JDK1.8,下载elasticsearch5.2.0 https://www.elastic.co/downlo ...
- HTML5的DeviceOrientation实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- [VUE ERROR] Invalid prop: type check failed for prop "list". Expected Array, got Undefined
错误原因: 子组件 props -> list 要求接收的数据类型是 Array, 然而实际接收到的是 Undefined. 子组件代码: props: { list: { type: Arra ...
- Spark jdbc postgresql数据库连接和写入操作源码解读
概述:Spark postgresql jdbc 数据库连接和写入操作源码解读,详细记录了SparkSQL对数据库的操作,通过java程序,在本地开发和运行.整体为,Spark建立数据库连接,读取数据 ...
- Loadrunner 脚本录制-通过代理录制脚本
脚本录制-通过代理录制脚本 by:授客 QQ:1033553122 版本:Loadruner 11.0 A.PC端录制Web应用程序 步骤1:根据实际情况,选择对应的协议 本例中选择Web(HTTP/ ...