制作抖音的训练

body代码

 <div id="box1">

        <i class="iconfont icon-video"></i></br>

        <span>关注</span>

        <i class="iconfont icon-shuxian"></i>

        <span>推荐</span>

        <i class="iconfont icon-shuxian"></i>

        <span>附近</span></br>

        <i class="iconfont icon-search"></i></br>

        <i class="iconfont icon-star"></i></br>

        <i class="iconfont icon-comment"></i></br>

        <i class="iconfont icon-share"></i>

        <p>@淘气的猫</p>

        <p> 限公司出品创看港黑相题材系列电影，正传电影由刘传理执导，郑伊健、 陈小石等主演</p>

        <p class="iconfont icon-music1"> 烟台融媒创作的原创原声烟台传媒</p>

        <img src="images/3.jpg" ><img/></br>

        <div id="box2">

            <video src="video/1.mp4" width="570"  controls></video>

            <div id="box3">

                <ul>

                    <li >首页</li>

                    <li>朋友</li>

                    <li><i class="iconfont icon-share"></i></li>

                    <li>消息</li>

                    <li>我</li>

                </ul>

            </div>

        </div>

</div>

style代码

      div{

            height:600px;

            width: 572px;

            background-color:black;

            color: beige;

            font-size: 10px;

        }

        /* #box3 li{

        width: 100%;

        background-color: black;

        position: fixed;bottom: 0;z-index: 100;

        } */

       

        img{

    width: 100px;

    height: 100px;

    border-radius: 50%;

    border: 1px solid wheat;

    animation: loading 2s linear 0s infinite;

}

@keyframes loading

{

    0%{

        transform: rotate(0deg);

    }

    50%{

        transform: rotate(180deg);

    }

    100%{

        transform: rotate(360deg);

    }

}

 <link rel="stylesheet" href="iconfont/iconfont.css">