学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
当然这谁都会,但有个问题是,下雪并不是机械的下落,而是有快有慢、摆动幅度、时间不定,这里的重点是需要构造随机性,理性分析下。
-
在浏览器中下雪的起始点随机;
-
下雪的速度随机;
-
下雪从开始到落到地面的时间随机(延时随机和整个下雪过程的时间随机);
-
下雪过程中摇摆随机。
我们可以在css中找到这几点随机性的对应属性:
-
起始点:
position
的左右方位(动画我们一般采用定位,因为可以减少不必要的重排和重绘); -
速度:
animation-timing-function
(提供了丰富的速度属性); -
时间:
animation-duration
和animation-delay
; -
摇摆:
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~100
vw
:注意单位是vw
,我们想要雪花的起始点出现在水平方向的任意位置,而vw
是把屏幕等分为100
份,100vw
就是满屏; -
为什么要把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% {
transform: translateX(#{$i * 10}px);
}
75%{
transform: translateX(-#{$i * 10}px);
}
100%{
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ateX(-#{$i * 10}px);
}
50% {
transform: translateX(#{$i * 10}px);
}
75%{
transform: translateX(-#{$i * 10}px);
}
100%{
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-LsbWe38u-1715875565397)]