css实现不规则运动 |css 酷炫界面

/* CSS实现不规则运动的基础 */
.element {
position: absolute;
}
/* 根据需求设置不同的运动方式和路径 */
.element:nth-child(1) {
animation: move-1 5s infinite;
}
.element:nth-child(2) {
animation: move-2 5s infinite;
}
/* 定义不规则运动的关键帧 */
@keyframes move-1 {
0% {
top: 0;
left: 0;
}
25% {
top: 200px;
left: 400px;
}
50% {
top: 400px;
left: 200px;
}
75% {
top: 200px;
left: 0;
}
100% {
top: 0;
left: 400px;
}
}
@keyframes move-2 {
0% {
top: -100px;
left: 0;
}
25% {
top: 200px;
left: 400px;
}
50% {
top: 400px;
left: 200px;
}
75% {
top: 200px;
left: 0;
}
100% {
top: -100px;
left: 400px;
}
}

如上所示的CSS代码实现了两种不同的不规则运动方式，并且定义了一些关键帧来控制元素在不同时间点的位置。这样，大家就可以将这些CSS样式应用到网页的元素上，让它们呈现出生动有趣的运动效果。同时，大家也可以根据实际需求设计出更多的不规则运动方式，从而为网页带来更多的动态元素。