CSS3动画特效在活动页中的应用


Posted in HTML / CSS onJanuary 21, 2020

背景

在不知不觉中,忙碌的一年将要结束,又到了一年一度的活动期了,为了展现喜庆的节日气氛,活动页面动态效果必不可少。

先上效果图:

CSS3动画特效在活动页中的应用

一、整体分析

从图中可 以看到主要的动态效果有动态指示箭头和漫天飘雪效果,如果偷懒的话并直接使用这张效果图作为背景的话很不可取,因为张图片大小足有 3M多,这对于服务器和用户体验来说简直就是灾难,由于是活动页面访问量自然少不了,在并发量较高的情况下服务器自然不堪重负、同时也心疼用户的流量和用户等待响应的时间,作为一个精益求精的人,我们的原则是能用程序实现的效果坚决不用 gif ,能节省多少资源就节省多少资源。

二、动态指示箭头

从程序实现角度来看,我们首先要做的是封装变化点,将变与不变相分离,图中的五个关卡形式大体一致,每个关卡都有底座和箭头,将关卡封装好后再用数据驱动每个关卡的位置和箭头指示方向。

相关数据如下:

[
    {
        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.动态效果分析

仔细观察效果图后发现,整体是有一个 3D 透视效果,视角并非垂直俯视,而像是 45 °角俯视。首先想到的是强大的 css3 的 3D 旋转,箭头效果可分为运行轨道 + 箭头运行效果。这样只需要对轨道做 3D 透视,箭头沿着外层轨道做重复运动就可以了。
 

CSS3动画特效在活动页中的应用

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: -20px;
  }
  100% {
    opacity: 0;
  }
}

三、漫天飘雪

仔细观察效果图,雪花有大有小、速度有快有慢、位置有近有远、颜色有深有浅雪花整体飘动的方向是从上往下从左到右,并且要下的很均匀。

1.实现思路

雪花飘动轨道 +雪花飘动效果,将轨道倾斜一定角度后平铺整个屏幕,用数据控制每条轨道的位置、层级、轨道内雪花的大小、运行延迟、运行速度、颜色深浅。为了更直观的看到实现效果,将轨道设置背景色如下图:

CSS3动画特效在活动页中的应用

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: -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;

四、总结

作为前端开发人员,一定要尽可能的还原效果图,在追求还原度的同时一定要考虑性能与用户体验,使页面既有美感同时 尽可能的轻量简洁。

以上所述是小编给大家介绍的CSS3动画特效在活动页中的应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 #HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 #HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 #HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 #HTML / CSS
Grid 宫格常用布局的实现
Jan 10 #HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 #HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 #HTML / CSS
You might like
thinkPHP中分页用法实例分析
2015/12/26 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
python zip文件 压缩
2008/12/24 Python
Python编写屏幕截图程序方法
2015/02/18 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Django 内置权限扩展案例详解
2019/03/04 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
外包公司软件测试工程师
2014/11/01 面试题
软件配置管理有什么好处
2015/04/15 面试题
大学同学聚会邀请函
2014/01/19 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
欢度春节标语
2014/07/01 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
2014年工程工作总结
2014/11/25 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
社区党务工作总结2015
2015/05/19 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
毕业感言怎么写
2015/07/31 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android