目录
1 视频
2 知识点
2.1 CSS calc() 函数
2.2 CSS var() 函数
2.3 CSS3 box-shadow 属性
2.4 CSS3 box-sizing 属性
2.5 CSS3 filter(滤镜) 属性
2.6 CSS3动画(animation)
3 参考代码
3.1 HTML
3.2 CSS
视频地址:https://www.bilibili.com/video/BV1D5411H7Tc
CSS calc() 函数用于动态计算长度值。
语法
calc(expression)
值 | 描述 |
---|---|
expression | 必须,一个数学表达式,结果将采用运算后的返回值。 |
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则; 支持版本:CSS3
var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,可以使用该方法。 支持版本:CSS3
语法
var(custom-property-name, value)
值 | 描述 |
---|---|
custom-property-name | 必需。自定义属性的名称,必需以 -- 开头。 |
value | 可选。备用值,在属性不存在的时候使用。 |
box-shadow属性可以设置一个或多个下拉阴影的框。
默认值: | none |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxShadow="10px 10px 5px #888888" |
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
Box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
默认值: | content-box |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxSizing="border-box" |
语法
box-sizing: content-box|border-box|inherit:
值 | 说明 |
---|---|
content-box | 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
border-box | 指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 指定 box-sizing 属性的值,应该从父元素继承 |
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
默认值: | none |
---|---|
继承: | no |
动画支持: | 是。 |
版本: | CSS3 |
JavaScript 语法: | object.style.WebkitFilter="grayscale(100%)" |
CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示: 使用空格分隔多个滤镜。
Filter 函数
注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
默认值,没有效果。
动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。
动画的基本使用: 1 定义动画 2 调用定义好的动画
定义动画语法
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
使用动画语法
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
动画序列
动画常见属性
下面的表格列出了 @keyframes 规则和所有动画属性:
动画简写方式
速度曲线细节
animation-timing-function: 规定动画的速度曲线,默认是ease。
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载动画:公众号AlbertYang</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="loader">
<div style="--x:0"></div>
<div style="--x:1"></div>
<div style="--x:2"></div>
<div style="--x:3"></div>
<div style="--x:4"></div>
<div style="--x:5"></div>
</div>
</body>
</html>
3.2 CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #edf1f4;
min-height: 100vh;
}
.loader {
display: flex;
flex-direction: row;
}
.loader div {
position: relative;
width: 40px;
height: 200px;
margin: 20px;
overflow: hidden;
border-radius: 50px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
border: 2px solid #edf1f4;
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
-15px -15px 20px #fff,
inset -5px -5px 5px rgba(255, 255, 255, 0.5),
inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}
.loader div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
border-radius: 50px;
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
-15px -15px 20px #fff,
inset -5px -5px 5px rgba(255, 255, 255, 0.5),
inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}
.loader div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1),
0 420px 0 400px #2196f3;
animation: animate 2.5s ease-in-out infinite;
animation-delay: calc(var(--x) * -0.3s);
transform: translateY(160px);
}
@keyframes animate {
0% {
transform: translateY(160px);
filter: hue-rotate(0deg);
}
50% {
transform: translateY(0px);
filter: hue-rotate(180deg);
}
100% {
transform: translateY(160px);
filter: hue-rotate(360deg);
}
}
今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。如果想继续学习提高,欢迎关注我,每天学习进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!