CSS3動(dòng)畫(huà)特效在活動(dòng)頁(yè)中的應(yīng)用示例

這篇文章給大家分享的是有關(guān)CSS3動(dòng)畫(huà)特效在活動(dòng)頁(yè)中的應(yīng)用示例的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

背景

在不知不覺(jué)中，忙碌的一年將要結(jié)束，又到了一年一度的活動(dòng)期了，為了展現(xiàn)喜慶的節(jié)日氣氛，活動(dòng)頁(yè)面動(dòng)態(tài)效果必不可少。

先上效果圖：

一、整體分析

從圖中可 以看到主要的動(dòng)態(tài)效果有動(dòng)態(tài)指示箭頭和漫天飄雪效果，如果偷懶的話并直接使用這張效果圖作為背景的話很不可取，因?yàn)閺垐D片大小足有 3M多，這對(duì)于服務(wù)器和用戶體驗(yàn)來(lái)說(shuō)簡(jiǎn)直就是災(zāi)難，由于是活動(dòng)頁(yè)面訪問(wèn)量自然少不了，在并發(fā)量較高的情況下服務(wù)器自然不堪重負(fù)、同時(shí)也心疼用戶的流量和用戶等待響應(yīng)的時(shí)間，作為一個(gè)精益求精的人，我們的原則是能用程序?qū)崿F(xiàn)的效果堅(jiān)決不用 gif ，能節(jié)省多少資源就節(jié)省多少資源。

二、動(dòng)態(tài)指示箭頭

從程序?qū)崿F(xiàn)角度來(lái)看，我們首先要做的是封裝變化點(diǎn)，將變與不變相分離，圖中的五個(gè)關(guān)卡形式大體一致，每個(gè)關(guān)卡都有底座和箭頭，將關(guān)卡封裝好后再用數(shù)據(jù)驅(qū)動(dòng)每個(gè)關(guān)卡的位置和箭頭指示方向。

相關(guān)數(shù)據(jù)如下：

[
    {
        state: 0,
        left: 9,
        top: -2,
        direction: { rotateZ: 290, color: "#d26754" }
    },
    {
        state: 0,
        left: 66,
        top: 10,
        direction: { rotateZ: 24, color: "#f58351" }
    },
    {
        state: 0,
        left: 18,
        top: 20,
        direction: { rotateZ: 30, color: "#f78351" }
    },
    {
        state: 0,
        left: -2,
        top: 36.5,
        direction: { rotateZ: 295, color: "#e19d47" }
    },
    {
        state: 0,
        left: 52,
        top: 49.5,
        direction: { rotateZ: 293, color: "#e19d47" }
    }
]

1.動(dòng)態(tài)效果分析

仔細(xì)觀察效果圖后發(fā)現(xiàn)，整體是有一個(gè) 3D 透視效果，視角并非垂直俯視，而像是 45 °角俯視。首先想到的是強(qiáng)大的 css3 的 3D 旋轉(zhuǎn)，箭頭效果可分為運(yùn)行軌道 + 箭頭運(yùn)行效果。這樣只需要對(duì)軌道做 3D 透視，箭頭沿著外層軌道做重復(fù)運(yùn)動(dòng)就可以了。
 

2.具體實(shí)現(xiàn)

<div class="item" flex="main:center cross:center"
:style="{left:item.left+'%',top:item.top+'%'}"
v-for="item in items" @click="showReceive(item)">
    <div class="bottom" flex="main:center cross:center">
        <div class="direction" flex="dir:top" :style="{transform:`rotateX(34deg) rotateY(0deg) rotateZ(${item.direction.rotateZ}deg)`}">
            <div class="half"></div>
            <div class="half track">
                <div class="arrow"
                :style="{transform: `rotate(${item.direction.rotate}deg`,
                right:`${item.direction.right}px`,
                'border-color': `${item.direction.color} transparent transparent`
                }"></div>
            </div>
        </div>
    </div>
</div>
  .direction {
    position: absolute;
    width: 20px;
    height: 260%;
    .half {
      flex: 1;
    }
    .track {
      position: relative;
      // margin-top: 90px;
      margin-top: 2em;
      .arrow {
        position: absolute;
        width: 0;
        height: 0;
        border: 10px solid;
        border-color: red transparent transparent;
        animation: dynamicArrow 3000ms infinite linear;
      }
    }
  }
/* //動(dòng)態(tài)箭頭 */
@keyframes dynamicArrow {
  0% {
    opacity: 1;
    bottom: 100%;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 0.1;
    bottom: -20px;
  }
  100% {
    opacity: 0;
  }
}

三、漫天飄雪

仔細(xì)觀察效果圖，雪花有大有小、速度有快有慢、位置有近有遠(yuǎn)、顏色有深有淺雪花整體飄動(dòng)的方向是從上往下從左到右，并且要下的很均勻。

1.實(shí)現(xiàn)思路

雪花飄動(dòng)軌道 +雪花飄動(dòng)效果，將軌道傾斜一定角度后平鋪整個(gè)屏幕，用數(shù)據(jù)控制每條軌道的位置、層級(jí)、軌道內(nèi)雪花的大小、運(yùn)行延遲、運(yùn)行速度、顏色深淺。為了更直觀的看到實(shí)現(xiàn)效果，將軌道設(shè)置背景色如下圖：

2.具體實(shí)現(xiàn)

<div class="snows">
  <div class="s_track" :style="{transform:`rotate(45deg) translate(${snow.deviation}px,${-snow.deviation}px)`,'z-index':snow.zindex}" v-for="snow in snows">
      <img class="snow" src="/static/original/img/DoubleDenierActivies/cbp_snow.png" :style="{opacity:snow.opacity,animation: `dynamicSnow ${snow.speed}ms ${snow.delay}ms infinite linear`,width:snow.size*1.14+'px',height:snow.size+'px'}"/>
  </div>
</div>
.s_track {
  position: absolute;
  width: 220%;
  // height: 10px;
  top: -10px;
  transform-origin: 0 0 0;
  .snow {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    animation: dynamicSnow 2000ms infinite linear;
  }
}
/* //雪花 */
@keyframes dynamicSnow {
  0% {
    visibility: visible;
    top: 0;
    left: 0;
    transform: rotate(0);
  }
  100% {
    visibility: visible;
    top: 100%;
    left: 100%;
    transform: rotate(360deg);
  }
}
let snows = [],
  initCount = 16;
for (let i = 0; i < initCount; i++) {
  let unit = i - 8,
    speed = i > 3 ? i % 3 : i,
    size = 0;
  speed++;
  if (i % 5 == 0) {
    size = 10;
  } else if (i % 8 == 0) {
    size = 20;
  } else {
    size = Math.random() * 10;
  }
  snows.push({
    deviation: unit * 40, //位置
    delay: Math.random() * 1000, //延遲
    speed: speed * 3000, //速度
    opacity: speed / 4,
    size: size,
    zindex: size >= 10 ? 4 : 0
  });
}
let snows2 = [];
snows.forEach(f => {
  snows2.push({
    ...f,
    deviation: snows[parseInt(Math.random() * initCount)].deviation - 10,
    delay: f.delay + 1000 //延遲
  });
});
let snows3 = [];
snows.forEach(f => {
  snows3.push({
    ...f,
    deviation: snows[parseInt(Math.random() * initCount)].deviation - 20,
    delay: f.delay + 2000 //延遲
  });
});
snows = snows.concat(snows2);
snows = snows.concat(snows3);
snows.sort((a, b) => a.deviation - b.deviation);
this.snows = snows;

感謝各位的閱讀！關(guān)于“CSS3動(dòng)畫(huà)特效在活動(dòng)頁(yè)中的應(yīng)用示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！