Web前端最全【Demo】项目练习之纯css模拟下雪效果(2)，2024年最新vivo前端面试经验

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

当然这谁都会，但有个问题是，下雪并不是机械的下落，而是有快有慢、摆动幅度、时间不定，这里的重点是需要构造随机性，理性分析下。

1. 在浏览器中下雪的起始点随机;

2. 下雪的速度随机;

3. 下雪从开始到落到地面的时间随机（延时随机和整个下雪过程的时间随机）;

4. 下雪过程中摇摆随机。

我们可以在css中找到这几点随机性的对应属性：

1. 起始点：position的左右方位（动画我们一般采用定位，因为可以减少不必要的重排和重绘）；

2. 速度：animation-timing-function（提供了丰富的速度属性）；

3. 时间：animation-duration和animation-delay；

4. 摇摆：transform: translateX()（在水平方向上的位移）。

可能有人会问，这几个属性并不是随机的呀，并不像Math.random随机函数那样。我们换个思考方向，本文所说的随机是随机雪，并不是随机雪的属性。每个雪的下落时间、下落速度、摆动幅度是固定的，雪与雪之间的下落时间、下落速度、摆动幅度是不同，那么就达到效果了。

意识到这点，就剩下最后一个问题，怎样给每个雪不同的下落时间、下落速度、摆动幅度呢？这里我们使用真正的随机函数Math.random，利用data自定义属性配合Math.random和css的属性匹配规则，就可以确定动画效果了。

3.构造雪形状

---

3.1 一条线性渐变

.linear{

width: 100px;

height: 100px;

background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);

}

3.2 多条线性渐变画雪花

.linear{

width: 100px;

height: 100px;

border-radius: 50%;

background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),

linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),

linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),

linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);

}

4.构造下雪动画

---

我用sass写的css来构造动画，其实语言无所谓，重在原理。

4.1 起始点

@for $i from 1 through 100 {

.animation[data-animation-position=‘#{$i}’] {

left: #{$i}vw;

}

}

这里运用sass的循环函数来创造1到100的匹配class名为animation和属性选择器为[data-animation-position=1~100vw]的值，例如我们想要元素的left为50vw，就直接添加class名data-animation-position=50vw。这里有两点需要说明：

1. 范围1~100vw：注意单位是vw，我们想要雪花的起始点出现在水平方向的任意位置，而vw是把屏幕等分为100份，100vw就是满屏；

2. 为什么要把1～100都循环出来：只有这样才能匹配到范围内我们需要的值。

4.2 速度

$timing: (

linear: linear,

ease: ease,

ease-in: ease-in,

ease-out: ease-out,

ease-in-out: ease-in-out

);

@each $key, $value in $timing {

.animation[data-animation-timing=‘#{$key}’] {

transition-timing-function: $value;

}

}

4.3 时间

时间包含动画运动时间和延时时间。

@for $i from 1 through 4 {

.animation[data-animation-delay=‘#{$i}’] {

animation-delay: #{$i}s;

}

}

@for $i from 4 through 8 {

.animation[data-animation-duration=‘#{$i}’] {

animation-duration: #{$i}s;

}

}

4.4 摇摆

下雪由两个动画组成，分别是下落fall和摇摆swing，下落的动画是固定的，只有摇摆需要随机，所以我自定义了属性匹配规则，就可以随机摇摆了。

@for $i from 1 through 4 {

.animation[data-animation-name=‘#{$i}’] {

animation-name: fall, swing#{$i};

}

}

@for $i from 1 through 4 {

@keyframes swing#{$i}{

25% {

transform: translateX(-#{$i * 10}px);

}

50% {

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。