在逛B站时发现一些up主的小特效,此处记录下来,并对知识点做些解析
特效如下
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./css/style.css">
<title></title>
</head>
<body>
<div class="loading">
<span>Waiting...</span>
</div>
</body>
</html>
css代码
body {
margin: 0;
padding: 0;
background: #34495e;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
width: 200px;
height: 200px;
border-top: 10px solid #e74c3c;
border-radius: 50%;
box-sizing: border-box;
position: relative;
animation: a1 2s linear infinite;
}
.loading::before, .loading::after {
content: '';
width: 200px;
height: 200px;
box-sizing: border-box;
border-radius: 50%;
/* background-color: #E74C3C; */
position: absolute;
left: 0px;
top: -8px;
}
.loading::before {
border-top: 10px solid yellow;
transform: rotate(120deg);
}
.loading::after {
border-top: 10px solid royalblue;
transform: rotate(240deg);
}
.loading span {
position: absolute;
text-align: center;
color: #fff;
width: 200px;
height: 200px;
line-height: 180px;
animation: a2 2s linear infinite;
}
@keyframes a1{
to{
transform: rotate(360deg);
}
}
@keyframes a2{
to{
transform: rotate(-360deg);
}
}
box-sizing:
在一般情况下,我们并没有设置box-sizing属性,这个时候会默认为标准模式,即box-sizing: content-box
这是从Chrome上来看的具体图片
当你给div添加width/height时,他们的值指的仅是content内容区域的值,也就是图中的蓝色区域
此时盒模型的总宽度/高度=width/height+padding+border+margin
怪异模式
也叫怪异盒模型,与标准模式不同的是,它
width/height = 内容区宽度/高度 + padding + border
.box{
width:100px;
height:100px;
border:10px #ddd solid;
padding:10px;
margin:10px;
box-sizing:border-box;
}
此时盒子的总宽/高 = width/height + margin
图中不难看出width = border(10+10) + padding(10+10) + content(60)=100
盒子的总宽高 = width(100) + margin(10+10) = 120
animation:
语法格式:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
- 名称和时间自行定义
- 定义动画以何种运行轨迹完成一个周期,以下是几个常用值:
(1)linear:表示动画从头到尾的速度都是相同的。
(2)ease-in:表示动画以低速开始。
(3)ease-out:表示动画以低速结束。
(4)ease-in-out:表示动画以低速开始和结束。
- 设置动画在开始前的延迟时间:
默认是0,也可以自行定义,单位可为(s) 和 (ms)
- 动画播放次数,属性有两种:
(1)自行设置播放的次数。
(2)infinite:设置动画无线循环播放。
- 是否轮流反向播放动画
默认值是normal,动画正常播放。
可设置的属性值:
(1)reverse:表示动画反向播放。
(2)alternate:表示动画在奇数次播放时为正向播放,为偶数次播放时为反向播放。
(3)alternate-reverse: :表示动画在奇数次播放时为反向播放,为偶数次播放时为正向播放。
- 定义元素动画结束以后或者未开始的元素样式:
(1)forwards:表示动画结束后,元素直接接使用当前样式。
(2)backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值(当animation-direction为reverse或者alternate-reverse时)
举例:
animation:move 1s ease 2s 3 alertnate forwards
transform:
基本语法:
transform: rotate | scale | skew | translate |matrix;
-
旋转 rotate():
只对原元素进行一次2D旋转,rotate()括号里填写要旋转的角度,正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(120deg); -
移动 translate
- translate(x,y),它表示对象进行平移,以元素中心点为基点,按照设定的x,y参数值,当值为正数时,右方移动物体,为负时反向移动,如transform:translate(10px,10px):
- translateX : 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置。如:transform:translateX(100px):
- translateY:通过给定Y方向的数目指定一个translation。只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置。如:transform:translateY(20px):
-
缩放 scale
-
scale,cale(X,Y)是用于对元素进行缩放,括号中的X,Y对应元素坐标轴的X轴和Y轴,基点也是元素的中心点,但X,Y为大于1时,元素放大,小于1则缩小,若括号中只有一个值,则表示X,Y轴方向的缩放倍数一样。
-
scaleX:scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点。如:transform:scaleX(2)。
-
scaleY:scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点。如transform:scaleY(2)。
-
-
扭曲 skew
- skew(): 即指XY轴上的斜切变换,括号内可填写两个参数,分别对应X,Y轴,如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切,写法可为:transform:skew(30deg,30deg);
- skewX() : 按给定的角度沿X轴指定一个斜切变换。skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变行,同样可以通过transform-origin来改变元素的基点。写法可为:transform:skewX(30deg)
3.skewY() : 按给定的角度沿Y轴指定一个斜切变换。skewY是使元素以其中心为基点,并在垂直方向(Y轴)扭曲变形。同样我们可以通过transform-origin来改变元素的基点。写法可为:transform:skewY(30deg)