CSS3圖片混合怎麼使用

我們知道，在CSS3的強大特效功能的協助下，混合模式可以讓圖片產生令人驚豔的效果，混合模式是指將上層的映像融入下層映像時採用的各種模式，下面我們來看看案列

一、transform-origin

CSS變形的原點，預設是對象的中心點。transform-origin接受兩個參數，他們可以是百分比、em、px等具體的值，也可以是left、right、center、top、middle、bottom等關鍵字。

例如：

transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right;

transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;

transform-origin: 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

二、transition--過渡

1.transition-property：定義轉換動畫的CSS屬性名稱。可以是none|all|CSS屬性列表。

例如：

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property:background-color;

2.transition-duration：定義轉換動畫的時間長度。

例如：

transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;

3.transition-delay：定義過渡動畫的延遲時間。

例如：

transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;

4.transition-timing-function：定義轉換動畫的效果。

取值可以是：

ease：緩解效果。

ease-in：漸顯效果。

ease-out：漸隱效果。

ease-in-out：漸顯漸隱效果。

linear：線性效果。

cubic-bezier：特殊的立方貝茲路徑效果。cubic-bezier(0.3, 0, 0.5, 1.0)。

例如：

transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing-function: linear;

三、animation

1.animation-name：動畫名字。

2.animation-duration：動畫時間。

3.animation-timing-function：動畫播放方式。

4.animation-delay：動畫開始播放時間。

5.animation-iteration-count：播放次數。infinite表示無限次。。

6.animation-direction：動畫播放方向。normal--動畫的每次迴圈都向前 alternate--第偶數次向前，奇數次向後。

例如：

div {

-webkit-transform-style: preserve-3d;-webkit-animation-name: ani;-webkit-animation-duration: 10s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;}/* 下面調用動畫 */@-webkit-keyframes ani {0% {-webkit-transform: rotateX(0deg);}25% {-webkit-transform: rotateX(180deg);}50% {-webkit-transform: rotateX(360deg);}75% {-webkit-transform: rotateY(180deg);}100% {-webkit-transform: rotateY(360deg);}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

Css3中transform屬性的使用教程

CSS3關於translate屬性的詳細介紹

前端項目裡裡定位幾種方式