css3 中translate和transition的使用方法


Posted in HTML / CSS onMarch 26, 2020

translate和transition一直让我觉得,很牛皮很强大,怎么也学不会,其实是自己比较抗拒去了解她,接口看了不到半个小时的文档,大概了解了下,下面是示例,可以下载下来自己运行下试试

<!DOCTYPE html>
<html>
<head>
  <title>translate和transition</title>
</head>
<body>
<style type="text/css">
  div {
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
  }

  div#translate {
    transition: all 2s;
    -ms-transition: all 2s;
    -webkit-transition: all 2s;
  }

  div#translate:hover{
    transform: translate(50px, 100px);
    -ms-transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
  }
</style>
<div>Hello, This is a Div element</div>
<div id='translate'>Hello, This is another Div element</div>
</body>
</html>

演示demo请点(这里)[/css3/translate.html]

translate(a, b):用官方的话说叫做2D转移,其实就是平面上的x轴和y轴移动,搞那么多名词就是因为我们学识太低,不想让我们容易了解
a - 在横向(左右方向)也就是x轴移动a单位距离,比如是10px,那么就移动10px,正值向右移动,负值向左移动 b - 在纵向(上下方向)也就是y轴移动b单位距离,比如是50px,那么就移动10px,正值向下移动,负值向上移动

起点在左上角哈,但是如果元素位置开始就设置了非原点的话就另说了,就是在元素基础上做计算

原点(0,0)-------
|
|
|

transition 动画过渡

transition: property duration timing-function delay

property - css属性

duration - 动画执行时长 如果为0 动画不执行

timing-function 动画执行方式 默认ease

delay - 动画延迟执行时间 默认0

这四个是属性,别以为我是写了其他的属性,具体的看(文档)[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition]

总结

到此这篇关于css3 中translate和transition的使用方法的文章就介绍到这了,更多相关css3 translate transition 使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 #HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 #HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 #HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 #HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 #HTML / CSS
You might like
PHP 单引号与双引号的区别
2009/11/24 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
AngularJS内置指令
2015/02/04 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
Node.js制作简单聊天室
2017/01/12 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
vue小白入门教程
2018/04/02 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
大学生党员承诺书
2014/05/20 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
2015年林业工作总结
2015/05/14 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python