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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
html粘性页脚的具体使用
Jan 18 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 301转向实现代码
2008/09/18 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
YII框架http缓存操作示例
2019/04/29 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
浅析JSONP技术原理及实现
2016/06/08 Javascript
layui导航栏实现代码
2017/05/19 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python关键字and和or用法实例
2015/05/28 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Python绘制股票移动均线的实例
2019/08/24 Python
python之array赋值技巧分享
2019/11/28 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
企业战略合作意向书
2015/05/08 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js