css过渡：元素从一种样式逐渐改变为另一种的效果。
过渡所需的条件：1.所过渡的元素必须有css样式。2.必须有过渡时间。
以下是过渡元素的属性：
transition:简写属性，用于在一个属性中设置四个过渡属性。
transition-property:规定应用过渡的 CSS 属性的名称。
transition-duration:过渡所用的时时间。
transition-timing-function:过渡元素的时间曲线，属性值有linear(匀速的过程)、ease(逐渐变慢的过程)、ease-in(加速的过程)、ease-out(减速的过程)、cubic-bezier(0,0,0,0)贝塞尔曲线
transition-delay:指定一个过渡的开始时间（即多长时间后开始执行），默认是0

过渡效果我们一般用在鼠标滑过或者点击后，我这里以鼠标滑过为例：
1.鼠标滑过宽度变为原来的120%
2.鼠标滑过加上阴影
3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果。

transform(2D转换)
属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)

html部分

　　

<body>

	<div id="box">

	</div>

</body>

css部分：

#box{

			height: 200px;

			width: 200px;

			border:1px solid #000;

			/*1.鼠标滑过宽度变为原来的120%*/

			transition-property: width; /*所要过渡的属性名称*/

			transition-duration: 1s;/*过渡的时间*/

			transition-timing-function: linear;/*过渡的时间曲线*/

			transition-delay: 0;/*过渡的开始时间*/

			/*2.鼠标滑过加上阴影*/

			transition-property: box-shadow; /*所要过渡的属性名称*/

			transition-duration: 1s;/*过渡的时间*/

			transition-timing-function: linear;/*过渡的时间曲线*/

			transition-delay: 0;/*过渡的开始时间*/

			/*以上写法比较麻烦所以可以简写成：*/

			transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/

			-ms-transition: all 1s linear 0s;/*兼容IE10+*/

			-moz-transform: all 1s linear 0s;/*兼容 Firefox */

			-o-transition: all 1s linear 0s;/* 兼容Opera */

			-webkit-transform:  all 1s linear 0s;/* 兼容Safari and Chrome */;

		}

		/*transform(2D转换)

		属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/

		#box:hover{

			width: 120%;

			box-shadow: 0px 0px 5px orange;

	       /*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/

			/*1.平移*/

			transform: translate(50px,50px);  /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/

			-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;

			-ms-transform: translate(50px,50px);/*兼容IE10+*/

			-moz-transform: translate(50px,50px);/*兼容 Firefox */

			-o-transform: translate(50px,50px);/* 兼容Opera */

			/*只让x轴平移*/

			transform: translateX(50px); 

			-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;

			-ms-transform: translateX(50px);/*兼容IE10+*/

			-moz-transform: translateX(50px);/*兼容 Firefox */

			-o-transform:  translateX(50px);/* 兼容Opera */

			/*只让y轴平移*/

			transform: translateY(50px);

			-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;

			-ms-transform: translateY(50px);/*兼容IE10+*/

			-moz-transform: translateY(50px);/*兼容 Firefox */

			-o-transform:  translateY(50px);/* 兼容Opera */

			/*2.旋转*//*兼容性同 平移*/

			transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/

			 /*只让x轴旋转*/

			 transform:rotateX(45deg);

			 /*只让y轴旋转,相当一3D旋转*/

			 transform:rotateY(45deg);

			/*3.缩放*//*兼容性同 平移*/

			transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/

			/*4.扭曲*//*兼容性同 平移*/

			transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/

		}

　　

　　

　　

css-过渡的更多相关文章

  1. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  2. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  3. 047——VUE中css过渡动作实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  5. Vue css过渡 和 js 钩子过渡

    css过渡 <transition name="slide"> <div v-show="!showChatInput" class=&quo ...

  6. CSS过渡、CSS动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. css 过渡和 变形

    一.过渡(transition) transition-property: 指定具有过渡效果的CSS样式属性名 1.默认值: all 2.仅具有中间值(CSS样式值是数值的)的CSS样式具有过渡效果 ...

  9. css过渡

    过渡transition是一个复合属性 例子1 .example{ width: 200px; height: 100px; background-color: blanchedalmond; tra ...

  10. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

随机推荐

  1. 使用dynamic引发的异常：无法对 null 引用执行运行时绑定

    今天上午运营反映有商户的账单没有生成. 查看日志,在批量生成账单服务执行过程中,因为如下异常而中断了: 跑批异常 Microsoft.CSharp.RuntimeBinder.RuntimeBinde ...

  2. Windows jmeter配置

    JMeter是Apache软件基金会的产品,用于对提供静态的和动态的资源服务器性能的测试.是一款很方便的测试软件. JMeter 要依附Java SE 环境 所以在启用JMeter之前要安装JAVA ...

  3. UGUI之Scrollbar使用

    这个效果主要用到了3个组件(对象): 1:Scrollbar对象  滚动条 2:Scroll Rect组件  让对象具有滑动效果 3:Mask组件  遮罩层.把多余的部分隐藏不显示 Scrollbar ...

  4. Cf Round #403 B. The Meeting Place Cannot Be Changed(二分答案)

    The Meeting Place Cannot Be Changed 我发现我最近越来越zz了,md 连调程序都不会了,首先要有想法,之后输出如果和期望的不一样就从输入开始一步一步地调啊,tmd现在 ...

  5. Oracle 22表空间

    数据库与表空间: 表空间实际上是数据库上的逻辑储存结构,可以把表空间理解为在数据库中开辟的一个空间,用于存放我们的数据库的对象,一个数据库可以由多个表空间构成. 表空间与数据文件: 表空间实际上是由一 ...

  6. redis的key越来越多,对速度是否有影响

    ---恢复内容开始--- redis存储key是用字典对象的,查询性能几乎和数量级无关,只要保证内存够用就可以了,如果内存不够,会把内存和swap空间交换,这种情况下就会很影响性能,会读取出现读取磁盘 ...

  7. Unity3d之如何截屏

    Unity3d中有时有截屏的需求,那如何截屏呢,代码如下: /// <summary> /// 截屏 /// </summary> /// <param name=&qu ...

  8. node.js中express模块创建服务器和http模块客户端发请求

    首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文 ...

  9. GetWindowRect和GetClientRect的注意事项

    发现GetClientRect()函数取值不正确,特此找来了些资料以供参考,具体如下,就可以明白怎么回事了. 一:关于坐标 MFC中绘图时经常涉及到坐标计算,GetWindowRect和GetClie ...

  10. 详解Linux下iptables中的DNAT与SNAT设置（转）

    详解Linux下iptables中的DNAT与SNAT设置 这篇文章主要介绍了Linux下iptables中的DNAT与SNAT设置,是Linux网络配置中的基础知识,需要的朋友可以参考下   原文连 ...