百度首页js动效怎么实现啊？


百度右侧悬浮窗鼠标放在更多产品上出现悬浮窗的js动效怎么实现啊？
前端小白求助中。<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://www.baidu.com/favicon.ico" rel="SHORTCUT ICON">
    <title>百度一下，你就知道</title>
    <link rel="stylesheet" href="Demo.css">
    <!--引入字体图标-->
    <script src="font_1253621_gicjp8ltn4p/iconfont.js"></script>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!--网页头部-->
    <div class="head">
        <!--头部左侧-->
        <div class="head-left">
            <ul>
                <li class="weather weather-1">
                    <a href="">赣州:</a>
                </li>
                <li class="weather weather-2 weather-icon">
                    <a href=""></a>
                </li>
                <li class="weather weather-3">
                    <a href="">30</a>
                </li>
                <li class="weather weather-4">
                    <a href="">优</a>
                </li>
                <li class="weather weather-5">
                    <a href="">30</a>
                </li>
                <li class="weather weather-6">
                    <a href="">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-vertical-copy"></use>
                        </svg>
                    </a>
                </li>
                <li class="head-left-icon">
                    <a href="">换肤</a>
                </li>
                <li class="head-left-icon">
                    <a href="">消息(1)</a>
                </li>
                <li class="head-left-icon">
                    <a href="">显示频道</a>
                </li>
            </ul>
        </div>
        <!--顶部导航栏右侧-->
        <div class="head-right">
            <ul class="right">
                <li class="right-icon">
                    <a href="#">新闻</a>
                </li>
                <li class="right-icon">
                    <a href="#">hao123</a>
                </li>
                <li class="right-icon">
                    <a href="#">地图</a>
                </li>
                <li class="right-icon">
                    <a href="#">视频</a>
                </li>
                <li class="right-icon">
                    <a href="#">贴吧</a>
                </li>
                <li class="right-icon">
                    <a href="#">学术</a>
                </li>
                <li class="right-icon-1">
                    <a href="#">淡忘诠释一切57</a>
                </li>
                <li class="right-icon-2">
                    <a href="#">设置</a>
                </li>
            </ul>
            <span>更多产品</span>
        </div>
    </div>
    <!--网页主体部分-->
    <div class="body">
        <div class="body-wrapper">
            <div class="body-wrapper-img"></div>
            <div class="body-wrapper-form">
                <form action="">
                    <div class="body-wrapper-form-sousuo">
                        <input type="text" name="" id="" />
                    </div>
                    <div class="body-wrapper-form-btn">
                        <input type="button" value="百度一下" />
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--网页底部-->
    <div class="footer">
        <div class="first-line">
            <span class="copyright-text">
                <a href="#" class="sethome" target="_blank">设为首页</a>
                <span class="copyright-baidu">&copy;2019 &nbsp;Baidu&nbsp;</span>
                <a href="#" target="_blank" class="copyright-required">使用百度前必读</a>&nbsp;
                <a href="#" target="_blank" class="copyright-opinion">意见反馈</a>&nbsp;
                <span class="copyright-num">京ICP证030173号&nbsp;</span>
                <span class="copyright-logo">
                    <svg class="icon" aria-hidden="true" style="font-size: 16px;">
                      <use xlink:href="#icon-beian" ></use>
                    </svg>
                </span>
            </span>
        </div>
        <div class="recordcode">
            <span>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-guohui"></use>
                </svg>
            </span>
            <a href="#">京公网安备11000002000001号</a>
        </div>
    </div>
    <!--网页右侧悬浮窗-->
    <div id="body-right">
        <span id="more-goods">更多产品</span>
        <a href="#">
            <span class="more-goods-img more-goods-img01"></span>
            <span class="text">糯米</span>
        </a>
        <a href="#">
            <span class="more-goods-img more-goods-img02"></span>
            <span class="text">音乐</span>
        </a>
        <a href="#">
            <span class="more-goods-img more-goods-img03"></span>
            <span class="text">图片</span>
        </a>
        <a href="#">
            <span class="more-goods-img more-goods-img04"></span>
            <span class="text">知道</span>
        </a>
        <a href="#">
            <span class="more-goods-img more-goods-img05"></span>
            <span class="text">文库</span>
        </a>
        <a href="#">
            <span class="more-goods-img more-goods-img06"></span>
            <span class="text">风云榜</span>
        </a>
        <a href="#">
            <span class="more-goods-img more-goods-img07"></span>
            <span class="text">百度推广</span>
        </a>
        <a href="#" class="all-goods">
            <span class="all-goods-sp">全部产品>></span>
        </a>
    </div>
</body>
</html>body, div, a, span, ul, li, input, svg, use {
    padding: 0;
    margin: 0;
}
ul li {
    list-style: none;
}
body {
    /*height: 1000px;*/
    /*overflow-x: hidden;*/
    /*scroll 裁剪内容 - 提供滚动机制。*/
    overflow-y: scroll;
    position: relative;
    text-align: center;
}/*网页头部*/
.head {
    width: 100%;
    height: 32px;
    border-bottom: 1px solid #ebebeb;
}
.head .head-left {
    margin-left: 18px;
}
.head div li {
    font-size: 12px;
    line-height: 32px;
}
.head .head-left li a,
.head .head-left .head-left-icon a,
.head .head-right .right a {
    color: #555;
}
/*设置浮动*/
.head .head-left li a {
    float: left;
}
.head .head-right{
    float: right;
}
.head .head-right ul {
    float: left;
}
.head .head-right span {
    float: left;
}
.head .head-right .right li {
    float: left;
}
/*显示天气预报的小logo  start*/
.head .head-left .weather-2 {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: 6px;
    float: left;
}
.head .head-left .weather-2 {
    background: url("images/a1.png") no-repeat;
    background-size: cover;
}
/*显示天气预报的小logo  end*//*微调li元素之间的间距  start*/
.head .head-left .weather {
    float: left;
}
.head .head-left .weather-1 {
    width: 28px;
    height: 32px;
    margin-right: 10px;
}
.head .head-left .weather-2 {
    width: 18px;
    height: 18px;
    margin-right: 7px;
}
.head .head-left .weather-3 {
    margin-right: 12px;
}
.head .head-left .weather-4 {
    margin-right: 10px;
    font-weight: 700;
}
.head .head-left .weather-4 a {
    color: #4484ff;
}
.head .head-left .weather-5 {
    margin-right: 10px;
}
.head .head-left .weather-6 {
    margin-right: 13px;
}
/*取消a标签下划线*/
.head .head-left .weather a {
    text-decoration: none;
}.head .head-left .head-left-icon a{
    margin-right: 22px;
}
/*微调li元素之间的间距  end*//*微调右侧li元素的样式  start*/
.head .head-right .right-icon a {
    font-size: 13px;
    font-weight: 700;
}
.head .head-right .right-icon-1 a,
.head .head-right .right-icon-2 a {
    font-size: 13px;
}
.head .head-right li {
    margin-right: 21px;
}/*更多产品*/
.head-right span {
    display: inline-block;
    width: 88px;
    height: 32px;
    background-color: #398bfb;
    color: #fff;
    text-align: center;
    line-height: 32px;
    font-size: 13px;
}
/*微调右侧li元素的样式  end*//*主体部分 start*/
.body {
    position: relative;
    height: 260px;
    min-height: 260px;
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 370px;
}
.body-wrapper {
    width: 641px;
    height: 219px;
    position: absolute;
    left: 180px;
    top: 41px;
    /*border: 1px solid black;*/
}
/*logo*/
.body-wrapper-img {
    width: 270px;
    height: 129px;
    background: url(images/bd_logo1.png) no-repeat;
    background-size: cover;
    position: static;
    margin: 33px  auto 0;
    cursor: pointer;
}
/*搜索框*/
.body-wrapper-form {
    position: relative;
    margin-top: 18px;
}
.body-wrapper-form-sousuo {
    width: 536px;
    height: 40px;
}
.body-wrapper-form-sousuo input {
    width: 480px;
    height: 20px;
    padding: 9px 48px 9px 7px;
    border: 1px solid #b9b9b9;
    border-right: 0;
    /*margin-top: 18px;*/
}
.body-wrapper-form-btn input {
    width: 105px;
    height: 40px;
    background-color: #38f;
    border: 0;
    padding: 0;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
}
/*主体部分 end*//*底部样式 start*/
.footer {
    width: 1000px;
    height: 40px;
    display: block;
    margin: 0 auto;
    text-align: center;
}
/*设置浮动*/
.copyright-text .sethome,
.copyright-text .copyright-baidu,
.copyright-text .copyright-required,
.copyright-text .copyright-opinion,
.copyright-text .copyright-num,
.copyright-text .copyright-logo {
    font-size: 12px;
    color: #999;
}
.copyright-text .copyright-baidu,
.copyright-text .copyright-required,
.copyright-text .copyright-opinion,
.copyright-text .copyright-num {
    margin-right: -5px;
}
.copyright-logo .icon use