使用HTML+CSS实现小车移动动画web前端
实现这个简单动画其实就是使用到了 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盒子放小车
效果如图：
视频
视频