纯css实现边界检测小球动画

文章目录

  • 前言
  • 实现环境
  • 话不多说直接上代码
  • 后言

前言

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>

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

你可能感兴趣的:(css,css,前端)