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模块的目前的状况分析
Feb 24 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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
MySQL修改密码方法总结
2008/03/25 PHP
php Ajax乱码
2008/04/09 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
Python PyQt5整理介绍
2020/04/01 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
民族团结先进个人材料
2014/02/05 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
离婚协议书范本样本
2014/08/19 职场文书
银行奉献演讲稿
2014/09/16 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
出生证明范本
2015/06/15 职场文书
家访教师心得体会
2016/01/23 职场文书