当前位置: 首页 > Web前端 > HTML5

大厂h5开源视频系列-京东校招推广

时间:2023-04-05 19:13:38 HTML5

前言大厂h5开源视频系列是一个话题,在这个话题中我们将分析一些很酷的在线h5,在每一个细节,每一个微妙的过渡中都可以看到大厂的苦心。幕后的前端工程师。这篇文章带来的是??京东学校招聘宣传线上链接??京东校招推广小伙伴们可以自己感受一下,每一个画面的动画加上背景音乐是??不是让你WANNADANDANDANDANCE不由自主的跳起来,想要投身于京东物流商(快递)行业。一起来学习一下这个h5的一些有趣的地方吧。学完了,希望你能尽快去找东哥?每次h5加载的loading部分,为了减少用户的焦虑,各公司都下了功夫。最常见的有圆圈和进度条……解析:一个长方体上下运动,它周围的竖线左右旋转,从上到下运动。我们首先构建html结构。对于一个立方体,比如gif,我们只需要5个面,底面就不需要了。添加四条垂直线:

div>66%

布局难点点立方体绘制主要是利用transform(rotateY,rotateX,translateZ)对各个面进行平移旋转,固定在应该放置的位置。立方体边框绘制:是从红到白的渐变,关键代码border:1pxsolid;border-image:linear-gradient(#ff1224,rgba(255,18,36,0))2100%;border-top:none;border-bottom:none;height:5em;width:1em;重要的属性border-image,这个属性可以说是CSS3中的一个通用属性。不知道的同学可以参考Xinxu老师的border-image来解释布局。布局完成后,我们就来我们的动画:立方体的上下移动,我们只需要控制translateY方向的位移即可,animation-direction:alternate让动画正反播放.loading.c-cube-1{animation:cube-up-down-1.8sease-in-out无限交替;}@keyframescube-up-down-1{0%{transform:translateZ(0)}to{transform:translate3d(0,-.4rem,0)}}左右旋转,设置为rotateY.loading.c-cube{animation:spin-cube-right1.2slinearinfinite;}@keyframesspin-cube-right{0%{transform:rotateX(-33.5deg)rotateY(45deg)}to{transform:rotateX(-33.5deg)rotateY(225deg)}}在Slogon页面html的第一屏是一个slogan这是一家以速度着称的公司最后展示给用户的是一张背景图,那么文字呢?这里作者使用了text-indent:-133.32rem;将文本缩进到用户看不到的地方。虽然看不到,但是对SEO有好处。我们的标语(你还年轻,应该更快),从下到上淡入淡出。注意:动画填充模式:两者;是前向和后向的结合。.p1.swiper-slide-active.slogon{animation:fadeInUp.5s.3sboth;}@keyframesfadeInUp{0%{opacity:0;转换:translate3d(0,100%,0);}100%{不透明度:1;变换:无;}}接下来的几屏都是以fast为主题的场景。这些屏有几个特点,一字快,一标语,布局上大多是数字滚动。作者使用里程表进行数字滚动。css/js库加上自定义字体这里就不多介绍了。本主题页解析:文字淡入从右到左的两个三维柱的斜方向。html基本结构刻录更快到达你想要的未来京东2018年校园招聘招聘人群:2018年毕业
全日制本科、硕士、博士京东招聘第一部分文字从右向左淡入,透明度的变化+translateX方向的偏移@关键帧fadeInRight{0%{opacity:0;transform:translate3d(50%,0,0);}100%{opacity:1;transform:none;}}那么如何依次进入呢?.p8.swiper-slide-active.logo-ran{动画:fadeInRight.5s.3s两者;}.p8.swiper-slide-active.text-slogon{动画:fadeInRight.5s.4s两者;}.p8.swiper-slide-active.text-title{animation:fadeInRight.5s.6sboth;}.p8.swiper-slide-active.text-detail{animation:fadeInRight.5s.7sboth;}答案是:animation-delay可以第二部分,三维柱子是如何制作的?圆柱体:是背景渐变background-image:linear-gradient(-90deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,0));HSLA和RGBA一样有两种颜色模式,RGBA指的是“红、绿、蓝、alpha透明度”,HSLA指的是“色相、饱和度、亮度、alpha透明度”列顶:是方形旋转+倾斜宽度:.70667rem;height:.70667rem;background-color:#fff;transform:rotate(51deg)skew(20deg);看到这里我真的很震惊,感叹作者的巧妙构思,一招让用户看起来像三-维度支柱。同样,我们也需要使用变换来倾斜和移动列:translateYtranslateX.cube-cnt-2{animation:cube-cnt-1-anim1.5sease-in-outinfinitealternate;}@keyframescube-cnt-1-anim{0%{变换:translateZ(0);}100%{转换:translate3d(.10667rem,-.10667rem,0);}}招聘流程这一屏的实现基本就是上面说的,文字一一淡入,这里的小伙伴不妨自己尝试一下。以上就是对这些画面的分析。EOF文本结束?这里的源代码将加载页面与其他页面分开。在加载页面,你可以在github上获取源代码。您可以按照开源视频一步步进行。有问题可以加文末群聊。预告的下一部分,我们将分享网易云音乐2018年度总结,内容依旧精彩。大家在学习的时候是不是只对每个css属性一个个认识,对综合的例子没有概念,不知道怎么做,赶紧结合上面的讲解开始吧。欢迎关注本系列文章。如果您有任何问题,可以加入???群聊和我讨论。