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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php读取3389的脚本
2014/05/06 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
jQuery之日期选择器的深入解析
2013/06/19 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
JS中图片压缩的方法小结
2017/11/14 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
汽车驾驶求职信
2013/10/25 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
校园安全广播稿
2014/02/08 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
企业安全生产规章制度
2015/08/06 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
SQL Server中搜索特定的对象
2022/05/25 SQL Server
Java使用HttpClient实现文件下载
2022/08/14 Java/Android