css3 中translate和transition的应用方式

日期：2021-02-27 类型：科技新闻 

关键词：抠图软件电脑版，在线图片加水印，在线 抠图，在线画图网站，淘宝做图片用什么软件好

translate和transition1直让我感觉，很牛皮很强劲，如何也学不容易，实际上是自身较为抗拒去掌握她，插口看了不到半个小时的文本文档，大约掌握了下，下面是示例，能够免费下载下来自身运作下试试

<!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

这4个是特性，别认为我是写了别的的特性，实际的看(文本文档)[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition]

总结

到此这篇有关css3 中translate和transition的应用方式的文章内容就详细介绍到这了,更多有关css3 translate transition 应用內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：应用HTML5捕获声频与视頻信息内容简述及案例 返回下一篇：没有了