欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3 中translate和transition的使用方法

  發(fā)布時間：2020-03-26 17:10:22   作者：Gowhich   我要評論
這篇文章主要介紹了css3 中translate和transition的使用方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

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轉(zhuǎn)移，其實就是平面上的x軸和y軸移動，搞那么多名詞就是因為我們學識太低，不想讓我們?nèi)菀琢私?br /> a - 在橫向（左右方向）也就是x軸移動a單位距離，比如是10px，那么就移動10px，正值向右移動，負值向左移動 b - 在縱向（上下方向）也就是y軸移動b單位距離，比如是50px，那么就移動10px，正值向下移動，負值向上移動

起點在左上角哈，但是如果元素位置開始就設置了非原點的話就另說了，就是在元素基礎(chǔ)上做計算

原點(0,0)-------
|
|
|

transition 動畫過渡

transition： property duration timing-function delay

property - css屬性

duration - 動畫執(zhí)行時長 如果為0 動畫不執(zhí)行

timing-function 動畫執(zhí)行方式 默認ease

delay - 動畫延遲執(zhí)行時間 默認0

這四個是屬性，別以為我是寫了其他的屬性，具體的看(文檔)[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition]

總結(jié)

到此這篇關(guān)于css3 中translate和transition的使用方法的文章就介紹到這了,更多相關(guān)css3 translate transition 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論