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 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 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
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
快速解决element的autofocus失效问题
2020/09/08 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python 中字典嵌套列表的方法
2018/07/03 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python求绝对值的三种方法小结
2019/12/04 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
初中校园广播稿
2014/02/02 职场文书
旷课检讨书3000字
2014/02/04 职场文书
铁路安全事故反思
2014/04/26 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
初中家长评语和期望
2014/12/26 职场文书
家属慰问信
2015/02/14 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书