实现原理，给小球加两个动画，一个水平运动，一个垂直运动，合成抛物的效果！简单有效
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/*给body进行flex布局，实现垂直居中*/
body {
min-height: 100vh;/*高度适应浏览器高度*/
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
font-size: 20px;
font-weight: bold;
}
/*设置运动区域*/
#bg {
width: 600px;
height: 600px;
position: relative;
border: 2px solid #e0e0e0;
border-radius: 4px;/*给div设置圆角*/
/* padding: 20px; */
}
/*生成小球，并定义初始位置1*/
#ball {
position: absolute;
right: 0px;
bottom: 0px;
z-index: -200;
transition: all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41);
transform:translateY(-584px);
-webkit-transform:translateY(-584px);
opacity: 1;
}
#bg .ball-scroll{
opacity:0;
transform:translateX(0px);
-webkit-transform:translateX(0px);
}
#inner {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(0,160,220);
transform:translateX(-584px);
-webkit-transform:translateX(-584px);
transition: all 0.4s linear ;
}
#bg .inner-scroll{
transform:translateX(0px);
-webkit-transform:translateX(0px);
}
button {
width: 30px;
height: 30px;
border-radius: 20%;
color: #fff;
background: #AA7ECC;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="bg">
<button onclick="start()">+</button>
<div id="ball">
<div id='inner'>
</div>
</div>
</div>
<script type="text/javascript">
var el= document.getElementById("ball");
var inner =document.getElementById("inner");
function start(){
el.classList.add('ball-scroll')
inner.classList.add('inner-scroll')
}
</script>
</body>
</html>
网友评论