css3的transform，translate和transition之间的区别与作用
transform 和 translate
transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样
translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少
例如：
transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离
transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px
transform 有很多其它属性值，translate3D（3D变换）,scale（2D缩放）等其他的变换方式
transition
transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性
语法 transition：需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行
transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。
例如：
transition:width 2s;
transition:translate 2s;
transtion:all 2s;
实例1：
<html>
<head>
<title></title>
<style>
.bg{
background:red;
width:200px;
height:300px;
position:relative;
overflow:hidden;
} .top{
color:white;
text-align:center;
padding:10px;
} #bottomDiv{
background:yellow;
width:%;
position:absolute;
bottom:;top:50px;
transition:transform .3s;
} </style>
<script>
function clickM(){
window.flag = !window.flag;
if(window.flag){
document.getElementById('bottomDiv').style.cssText='transform:translate(0,100%)';
}else{
document.getElementById('bottomDiv').style.cssText='';
} }
</script>
</head>
<body>
<div class="bg">
<div class="top" onclick="clickM()">click me</div>
<div id="bottomDiv"></div>
</div> </body>
</html>
实例2：
<html>
<head>
<title></title>
<style>
h3{
margin:;
text-align:center;
}
.box{
width:250px;
margin: auto;
}
.item{
border-style: solid;
border-color: #d4d4d9;
-o-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMV…k1vE5IAAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC) stretch;
border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMV…k1vE5IAAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC) stretch;
border-width: 1px;
display: flex;
align-items: center;
position: relative;
}
.item input{
width: %;
height: 55px;
padding: 18px ;
font-size: 15px;
box-sizing: border-box;
display: block;
position: relative;
z-index: ;
background-color: transparent; //如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent
border: ;
outline:;
}
.item .placeholder{
width: %;
color: #ccc;
font-size: 15px;
position: absolute;
left: ;
top: %;
transform: translateY(-%) scale();
transition: transform .2s linear;
transform-origin: left;
} </style>
<script>
function xx(e){
e.nextElementSibling.style.cssText='transform:translateY(-110%) scale(.75);';
}
function yy(e){
e.nextElementSibling.style.cssText='';
}
</script>
</head>
<body>
<div class="box">
<h3>登录</h3>
<div class="item">
<input type="text" onfocus="xx(this)" onblur="yy(this)"/>
<span class="placeholder">请输入用户名</span>
</div>
<div class="item">
<input type="text" onfocus="xx(this)" onblur="yy(this)"/>
<span class="placeholder">请输入密码</span>
</div>
</div> </body>
</html>
css3的transform，translate和transition之间的区别与作用的更多相关文章
- CSS3：transform translate transition 这些都是什么？
transform:一个属性名称,即CSS3 2D转换 属性. translate:一个属性函数,用法是translate(dx,dy) div { transform: translate(50px ...
- css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
- 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- this.setData ， that.setData ， this.data.val三者之间的区别和作用
1.this.setData({ }) <view bindtouchmove="tap_drag" bindtouchend="tap_end" bin ...
- 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效
今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...
- CSS3中很容易混淆的transform,translate,transition。如何去区分，以及综合写法。
属性 含义 transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同 transform(变形) 用于元素进行旋转.缩放.移动或倾斜,和设 ...
- css3中的translate,transform,transition的区别
translate:移动,transform的一个方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
随机推荐
- 小程序：最难点For的wx:key
转自:http://www.wxappclub.com/topic/536 A:数据改变,导致重新渲染的两种情况: 1:有wx:key的情况(不重新创建,仅改变顺序) 添加元素或改变元素顺序导致数据改 ...
- Oracle数据库中字符型字段按数字排序
今天在转换数据时,遇到了一个主键排序的问题.字符型的主键,保存的都是数字,数据导过来以后发现数据排序都是乱的,就想着按数字规则排序. 但发现to_number总是报错,就想着里面应该是有字符存在.后来 ...
- python--使用队列结构来模拟烫手山芋的游戏
基本功,磨起来. # coding = utf-8 class Queue: def __init__(self): self.items = [] def is_empty(self): retur ...
- 一脸懵逼学习Hive（数据仓库基础构架）
Hive是什么?其体系结构简介*Hive的安装与管理*HiveQL数据类型,表以及表的操作*HiveQL查询数据***Hive的Java客户端** Hive的自定义函数UDF* 1:什么是Hive(一 ...
- dedecms首页入口的详细注释
今天闲来无事,就拿来dede首页的文件给大家详细解释一遍,以便于新手学习,注释过程非常非常非常的详细,里面解释到dede表前缀#@__代替的原理.解释到dede很多自定义函数的具体位置和具体作用等等疑 ...
- Zabbix监控Low level discovery实时监控网站URL状态
今天我们来聊一聊Low level discovery这个功能,我们为什么要用到loe level discovery这个功能呢? 很多时候,在使用zabbix监控一些东西,需要对类似于Itens进行 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战（1）-7项目缓冲方案（ Redis）
本文目录1. 摘要2. Redis配置3. RedisHelper4．使用实例 5. 总结 1. 摘要 由于內存存取速度远高于磁盘读取的特性,为了程序效率提高性能,通常会把常用的不常变动的数据存储在 ...
- JavaSE| 包装类| 时间
包装类 * 因为Java是面向对象的语言,所以很多API或新特性都是针对“对象”来设计的,但是Java设计之初时,是C语言很盛行的时候,所以Java保留了C语言中的8种基本数据类型, 保留它们有好处, ...
- 20165235 实验一 Java开发环境的熟悉
20165235 实验一 Java开发环境的熟悉 课程:JAVA程序设计 姓名:祁瑛 学号:20165235 指导老师:娄嘉鹏 实验日期: 2018.4.2 实验内容:java开发环境的熟悉 一,实验 ...
- Java 之 JavaScript （二）
1.DOM a.作用:通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素 b.功能: ①JavaScript 能够改变页面中的所有 HTML 元素 ②JavaScript ...