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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
css3新特性的应用示例分析
Mar 16 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中try catch捕获异常实例详解
2014/11/21 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python数据类型详解(一)字符串
2016/05/08 Python
深入理解Python变量与常量
2016/06/02 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
基于python使用tibco ems代码实例
2019/12/20 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
七年级音乐教学反思
2014/01/26 职场文书
商家认证委托书格式
2014/10/16 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android