CSS 动态背景圆点实现方法及代码示例
以下是一个使用 CSS 设置动态背景圆点的完整代码示例：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="background"></div>
</body>
</html>
CSS 代码 (style.css)：
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.background::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
z-index: -1;
animation: animateBackground 5s linear infinite;
}
@keyframes animateBackground {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -100%;
}
}
.background::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, #ffffff 10%, transparent 10%);
background-size: 30px 30px;
z-index: -1;
pointer-events: none;
}
这段代码中，首先使用一个 'div' 元素作为背景的容器，并添加一个名为 'background' 的类。
然后，使用 '::before' 伪元素来创建一个渐变的背景，使用 'linear-gradient' 函数设置从透明到半透明的渐变色。通过 'animation' 属性将背景动画化，并设置其持续时间为 5 秒，动画效果为线性无限循环滚动。
接下来，使用 '::after' 伪元素创建一个圆点背景。使用 'radial-gradient' 函数设置背景为圆点，并使用 'background-size' 属性设置圆点的大小。最后，通过 'pointer-events' 属性将该伪元素的点击事件禁用，以确保它不会干扰其他元素的交互。
原文地址: http://www.cveoy.top/t/topic/fmXL 著作权归作者所有。请勿转载和采集!