实现这个简单动画其实就是使用到了transition-timing-function属性。
在原有基础上增加一个盒子在原本实现伸缩动画的盒子里
代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登陆界面</title><style>/* 小车 */.foot{width: 100%;height: 3.57rem;margin-top: 2rem;background-image: url("my host web/images/1.png");}/* 父亲盒子 */.box10{ width:17.85rem;height: 3.57rem;float: left;margin-left: 2rem;transition:width 3s;}#box11 {transition-timing-function:linear;}#box12{float: right;width: 9.28rem;height: 3.57rem;}.box10:hover{width:95%;} </style></head><body><div class="foot"><div class="box10"><div id="box11" ><div id="box12"><img src="my host web/images/car.png"></div></div></div></div></body></html>
foot盒子放背景
box12盒子放小车
效果如图：
视频
