目录
- css实现抛物线
1. css实现抛物线
<!-- 父元素控制水平运动，子元素控制垂直方向运动 -->
<div class="box">
<div class="item"></div>
</div>
<style>
.box {
width: 40px;
height: 40px;
position: absolute;
left: 100px;
top: 100px;
}
.item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: pink;
}
/* 水平方向匀速移动100px */
.box:hover {
transform: translate(100px, 0);
transition: 0.5s linear;
}
/* 垂直方向速度先快后慢，移动300px */
.box:hover .item {
transform: translate(0, 300px);
transition: 0.5s cubic-bezier(.55,0,.85,.36);
}
</style>
