欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

前言

說(shuō)起CSS3動(dòng)畫(huà)，就必須說(shuō)說(shuō) transform，translate，transition，animation這4個(gè)屬性，transform主要定義元素的動(dòng)作，比如旋轉、傾斜、位移等，translate是transform里面的屬性，用于2D/3D位移。后2個(gè)主要對動(dòng)作進(jìn)行描述，動(dòng)畫(huà)時(shí)間、速度曲線(xiàn)、次數等。

下面我用是一些簡(jiǎn)單的示例，讓大家快速的入門(mén)上手:

快速開(kāi)始第一個(gè)動(dòng)畫(huà)

<style>
.div1{
    width: 100px;
    background: red;
    /** 動(dòng)畫(huà)描述：寬度改變動(dòng)畫(huà) 用時(shí) 1s*/
    transition: width 1s;
}
.div1:hover{
    width: 200px;
    background: blue;
}
</style>

<div class="div1">動(dòng)畫(huà)</div>

這里hover事件時(shí)改變寬度和背景顏色，用transition來(lái)描述動(dòng)畫(huà)，由于我們只對width進(jìn)行了描述，所以背景色，鼠標指上去，會(huì )立馬變色，并不會(huì )有漸變的過(guò)程。

這里為什么用transition而不用animation？那就要說(shuō)說(shuō)他們直接的區別了。

transition需要觸發(fā)一個(gè)事件， 而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著(zhù)時(shí)間變化來(lái)改變元素css的屬性值，從而達到一種動(dòng)畫(huà)的效果。

transition屬性是一個(gè)簡(jiǎn)單的動(dòng)畫(huà)屬性，非常簡(jiǎn)單非常容易用?？梢哉f(shuō)它是animation的簡(jiǎn)化版本，是給普通做簡(jiǎn)單網(wǎng)頁(yè)特效用的。

現在明白了吧，因為我們用的hover事件，所以要用transition。

下面請看第二個(gè)例子

快速開(kāi)始第二個(gè)動(dòng)畫(huà)

<style>
.div1{
    width: 100px;
    background: red;
    /** 動(dòng)畫(huà)描述：寬度顏色改變動(dòng)畫(huà) 用時(shí) 1s infinite（無(wú)限次）*/
    animation: second 1s infinite;
    color: #fff;
}
@keyframes second{
    /**開(kāi)始（可以用百分比表示）*/
    from {
      width: 100px;
      background: red;
    }
    /**結束（可以用百分比表示）*/
    to {
      width: 200px;
      background: blue;
    }

    /** or */
    /**開(kāi)始*/
    0% {
      width: 100px;
      background: red;
    }
    /**中間可以加多個(gè)區間*/
    /**結束*/
    100% {
      width: 200px;
      background: blue;
    }
}
</style>

<div class="div1">動(dòng)畫(huà)</div>

這里動(dòng)畫(huà)從加載就開(kāi)始執行，所以用了animation，改變寬度和背景色，用時(shí)1s，并且無(wú)限次循環(huán)執行。@keyframes規則是創(chuàng )建動(dòng)畫(huà)。

-webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用于兼容不同瀏覽器。

快速開(kāi)始第三個(gè)動(dòng)畫(huà)

<style>
.div1{
    width: 100px;
    background: red;
    animation: second 1s infinite;
    color: #fff;
}
@keyframes second{
    100% {
      transform: rotate(20deg);
    }
}
</style>

<div class="div1">動(dòng)畫(huà)</div>

transform：rotate使其div元素2D旋轉20°.當然你可以設置transform：rotateY, Y 軸的 3D 旋轉。

你還可以設置transform: translate，進(jìn)行2D，3D位移；

transform: scale，進(jìn)行2D，3D縮放；

transform: skew，進(jìn)行2D傾斜等等。

總結

好的動(dòng)畫(huà)效果，第一要素是：好的想法，有創(chuàng )意，才有好的成品；第二要素是：有好的實(shí)現解題思路，當有設計后，制作就需要想辦法實(shí)現效果，剝繭抽絲，一步一步來(lái)；第三要素：不畏懼的心，勇敢嘗試，多實(shí)踐，多動(dòng)手，靈感往往來(lái)與你寫(xiě)的過(guò)程中。

有了上面的小示例，相信小伙伴們也能自己寫(xiě)寫(xiě)簡(jiǎn)單的CSS3動(dòng)畫(huà)了，如果有疑問(wèn)，可以評論留言，大家一起學(xué)習探討。