碰壁反弹
实现内容:
位置随机,大小随机,碰壁反弹
-
横向碰壁反弹
-
碰壁反弹
-
多个元素碰壁反弹 随机颜色,速度,大小,位置
-
各种随机碰壁反弹
效果图
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width:100vw;
height: 100vh;
/* margin-top: 100px;
box-shadow: 0 0 3px lightcyan; */
position: relative;
/* border: 1px lightgray solid; */
overflow: hidden;
}
.ball {
/* width: 100px; */
/* height: 100px; */
/* background-color: gold; */
border-radius: 50%;