使用HTML+CSS实现小车移动动画web前端

最新推荐文章于 2022-12-12 09:41:46 发布

Einstein777

最新推荐文章于 2022-12-12 09:41:46 发布

阅读量1k

点赞数 1

分类专栏： web前端文章标签：前端 html css

本文链接：https://blog.csdn.net/Cpythonjavamacos/article/details/127455179

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实现这个简单动画其实就是使用到了 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盒子放小车

效果如图：

视频