CSS3动漫殊效在主题活动页中的运用

日期：2020-12-12 类型：科技新闻我要分享

关键词：如何创建网站，免费网站建站，网站建设文章，网站建设7个基本流程，自动建站

情况

在不知道不觉中，繁忙的1年即将完毕，又到了1年1度的主题活动期了，以便呈现喜庆的节日气氛，主题活动网页页面动态性实际效果必不能少。

先上实际效果图：

1、总体剖析

从图中可以看到关键的动态性实际效果有动态性标示箭头和漫天飘雪实际效果，假如偷懒的话并立即应用这张实际效果图做为情况的话很不能取，由于张照片尺寸足有 3M多，这针对服务器和客户体验来讲真是便是灾祸，因为是主题活动网页页面浏览量当然少不上，在高并发量较高的状况下服务器当然不堪入目重负、另外也心痛客户的总流量和客户等候回应的時间，做为1个精雕细琢的人，大家的标准是能用程序流程完成的实际效果果断无需 gif ，能节约是多少資源就节约是多少資源。

2、动态性标示箭头

从程序流程完成角度看来，大家最先要做的是封裝转变点，将变与不会改变相分离出来，图中的5个关卡方式大致1致，每一个关卡都有底座和箭头，将关卡封裝好后再用数据信息驱动器每一个关卡的部位和箭头标示方位。

有关数据信息以下：

[
    {
        state: 0,
        left: 9,
        top: ⑵,
        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: ⑵,
        top: 36.5,
        direction: { rotateZ: 295, color: "#e19d47" }
    },
    {
        state: 0,
        left: 52,
        top: 49.5,
        direction: { rotateZ: 293, color: "#e19d47" }
    }
]

1.动态性实际效果剖析

细心观查实际效果图后发现，总体是有1个三d 透視实际效果，视角并不是竖直俯瞰，而好像 45 °角俯瞰。最先想起的是强劲的 css3 的三d 转动，箭头实际效果可分成运作路轨 + 箭头运作实际效果。这样只必须对路轨做三d 透視，箭头沿着外层路轨做反复健身运动便可以了。

2.实际完成

<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;
      }
    }
  }
/* //动态性箭头 */
@keyframes dynamicArrow {
  0% {
    opacity: 1;
    bottom: 100%;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 0.1;
    bottom: ⑵0px;
  }
  100% {
    opacity: 0;
  }
}

3、漫天飘雪

细心观查实际效果图，雪花有大有小、速率有快有慢、部位有近有远、色调有深有浅雪花总体飞舞的方位是从上往下从左到右，而且要下的很匀称。

1.完成思路

雪花飞舞路轨 +雪花飞舞实际效果，将路轨歪斜1定角度后平铺全部显示屏，用数据信息操纵每条路轨的部位、等级、路轨内雪花的尺寸、运作延迟时间、运作速率、色调浓淡。以便更直观的看到完成实际效果，将路轨设定情况色以下图：

2.实际完成

<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: ⑴0px;
  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;

4、总结

做为前端开发开发设计人员，1定要尽量的复原实际效果图，在追求完美复原度的另外1定要考虑到特性与客户体验，使网页页面既有美感另外尽量的轻量简约。

以上所述是网编给大伙儿详细介绍的CSS3动漫殊效在主题活动页中的运用，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：HTML5报表返回下一篇：CSS 点一下radio完成两个照片款式切换而且好几个