要使用 CSS 制作背景视频，需要使用CSS3中的background-size属性和@keyframes规则来定义动画效果。
/* 在 CSS 文件中设置背景视频样式 */
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
/ 使用 @keyframes 规则定义动画效果 /
@keyframes bg-video {
0% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/ 在元素上应用动画效果 /
body {
animation: bg-video 10s ease-in-out infinite alternate;
}
上述代码中，video元素设置了视频的位置和尺寸，并将其放在最底层。然后，使用@keyframes规则定义了一个名为bg-video的动画效果，将body元素的背景应用这个动画，使得视频循环播放并呈现出缩放效果。
要使用 CSS 制作粒子效果，可以使用CSS3中的@keyframes规则和before伪元素来实现。
/* 在 CSS 文件中设置粒子效果 */
.element {
position: relative;
}
.element:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffffff;
animation: particles 2s ease-in-out infinite;
}
/ 使用 @keyframes 规则定义动画效果 /
@keyframes particles {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(100px, 100px);
opacity: 0;
}
}
上述代码中，element元素被设置为相对定位，然后在其:before伪元素中创建一个包含圆形粒子的元素。接着，使用@keyframes规则定义了一个名为particles的动画效果，将粒子元素应用这个动画，使其沿着对角线移动并逐渐变得透明。