目錄
- css實(shí)現(xiàn)拋物線
1. css實(shí)現(xiàn)拋物線
<!-- 父元素控制水平運(yùn)動(dòng)陨舱，子元素控制垂直方向運(yùn)動(dòng) -->
<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;
}
/* 水平方向勻速移動(dòng)100px */
.box:hover {
transform: translate(100px, 0);
transition: 0.5s linear;
}
/* 垂直方向速度先快后慢蝗罗，移動(dòng)300px */
.box:hover .item {
transform: translate(0, 300px);
transition: 0.5s cubic-bezier(.55,0,.85,.36);
}
</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
