CSS3动画特效在活动页中的应用
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
背景
在不知不觉中,忙碌的一年将要结束,又到了一年一度的活动期了,为了展现喜庆的节日气氛,活动页面动态效果必不可少。
先上效果图:
一、整体分析
从图中可 以看到主要的动态效果有动态指示箭头和漫天飘雪效果,如果偷懒的话并直接使用这张效果图作为背景的话很不可取,因为张图片大小足有 3M多,这对于服务器和用户体验来说简直就是灾难,由于是活动页面访问量自然少不了,在并发量较高的情况下服务器自然不堪重负、同时也心疼用户的流量和用户等待响应的时间,作为一个精益求精的人,我们的原则是能用程序实现的效果坚决不用 gif ,能节省多少资源就节省多少资源。
二、动态指示箭头
从程序实现角度来看,我们首先要做的是封装变化点,将变与不变相分离,图中的五个关卡形式大体一致,每个关卡都有底座和箭头,将关卡封装好后再用数据驱动每个关卡的位置和箭头指示方向。
相关数据如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | [ { 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 透视,箭头沿着外层轨道做重复运动就可以了。
2.具体实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <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 3000 ms infinite linear; } } } /* //动态箭头 */ @keyframes dynamicArrow { 0% { opacity: 1 ; bottom : 100% ; } 70% { opacity: 1 ; } 90% { opacity: 0.1 ; bottom : -20px ; } 100% { opacity: 0 ; } } |
三、漫天飘雪
仔细观察效果图,雪花有大有小、速度有快有慢、位置有近有远、颜色有深有浅雪花整体飘动的方向是从上往下从左到右,并且要下的很均匀。
1.实现思路
雪花飘动轨道 +雪花飘动效果,将轨道倾斜一定角度后平铺整个屏幕,用数据控制每条轨道的位置、层级、轨道内雪花的大小、运行延迟、运行速度、颜色深浅。为了更直观的看到实现效果,将轨道设置背景色如下图:
2.具体实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <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 2000 ms infinite linear; } } /* //雪花 */ @keyframes dynamicSnow { 0% { visibility : visible ; top : 0 ; left : 0 ; transform: rotate( 0 ); } 100% { visibility : visible ; top : 100% ; left : 100% ; transform: rotate( 360 deg); } } 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 snows 2 = []; snows.forEach(f => { snows 2 .push({ ...f, deviation: snows[parseInt(Math.random() * initCount)].deviation - 10 , delay: f.delay + 1000 //延迟 }); }); let snows 3 = []; snows.forEach(f => { snows 3 .push({ ...f, deviation: snows[parseInt(Math.random() * initCount)].deviation - 20 , delay: f.delay + 2000 //延迟 }); }); snows = snows.concat(snows 2 ); snows = snows.concat(snows 3 ); snows.sort((a, b) => a.deviation - b.deviation); this.snows = snows; |
四、总结
作为前端开发人员,一定要尽可能的还原效果图,在追求还原度的同时一定要考虑性能与用户体验,使页面既有美感同时 尽可能的轻量简洁。
以上所述是小编给大家介绍的CSS3动画特效在活动页中的应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关文章
- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
- 本文解析了CSS属性box-shadow的用法和应用,属性可以设置一个或多个下拉阴影的框,通过box-shadow属性,可以定义水平阴影的位置、垂直阴影的位置、模糊距离、阴影的大小和颜色2024-10-21
- CSS3的@media查询功能允许我们根据不同的媒体类型和设备特性来应用不同的样式规则,,本文详细探讨了@media查询的定义、语法、使用场景及注意事项,旨在帮助开发者更好地理解2024-10-17
CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现
CSS3的border-radius属性可以轻松制作圆角效果,支持一至四个值来分别定义四个角的圆角大小,一个值时所有角圆角相同,两个值时对角线上的角相同,本文给大家介绍CSS3 新特性 b2024-10-17- CSS3动画为网页设计带来了丰富的动态效果,使得页面更加生动和吸引人,然而,有时我们希望动画在结束时保持最终状态,而不是回到初始状态,本文将介绍几种方法来实现这一效果2024-10-15
- 伪元素和伪类都增强了CSS选择器的功能,但它们有明显的区别,伪元素通过::表示,如::before和::after,用于向元素添加或修改内容,伪类则通过:表示,如:hover和:first-child,用于2024-10-15
- 本文介绍了使用CSS3实现各种样式效果的方法,包括文字渐变、圆角、阴影、多重背景等,通过实例代码,展示了如何简洁有效地增强网页视觉效果,无需额外图像或复杂脚本,适合前端2024-09-13
- 在Web开发中,动态滚动播放列表能够提升用户体验,使内容展示更加生动有趣,本文介绍了如何仅使用CSS3实现一个基础的循环播放列表,其中关键技术包括@keyframes规则和animat2024-09-11
- 之前有做过一个需求,安卓端嵌H5页面,实现语音输入并包含输入时动画,跳动的小球,多个小球同时跳动,相对定位需要left不相同,其次每个小球动画开始有时间差,其次就是小2024-08-29
详解CSS3 边框样式(包含border-radius、border-image与box-shadow)
这篇文章主要介绍了CSS3 边框样式(包含border-radius、border-image与box-shadow)的相关知识,本文给大家介绍的非常详细,,需要的朋友可以参考下2024-08-29
最新评论