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

CSS动画：利用transition-timing-function实现小车伸缩效果

原创于 2022-10-22 12:05:19 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

web前端专栏收录该内容

8 篇文章

订阅专栏

这篇博客展示了如何通过CSS的transition-timing-function属性创建一个简单的动画效果，其中包含一个在父盒子内伸缩的小车图片。当鼠标悬停在父盒子上时，盒子宽度变化，小车随之进行线性过渡动画。代码示例详细解释了每个部分的作用，帮助读者理解CSS动画的实现原理。

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

效果如图：

视频