文章目录
- 前言
- 实现环境
- 话不多说直接上代码
- 后言
前言
hello world欢迎来到前端的新世界
😜当前文章系列专栏：css实现炫酷的动画
🐱👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力
实现环境
h5+c3 实现，小白放心食用，很简单。
话不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:150px;height:150px;border-radius: 50%;background-color: aqua;position: absolute;top:0px;left: 0px;animation: /* 移动事件错开，制造随机的动画 */hor 3.9s infinite linear alternate,ver 2.5s infinite linear alternate;}/* 水平方向移动 */ hor{to{left: calc(100vw - 150px);}}/* 垂直方向移动 */ ver{to{top: calc(100vh - 150px);}}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
后言
创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力
