css3中的@keyframes的使用

效果图：

想象一下他们都是动图

旋转图和滚动图

              

html代码如下:

　　　　　<div class="back">
            <img src="img/girl4.png"/>
        </div>
        <br></br>
        <div class="txt">
            <span data-txt="床前明月光">床前明月光</span>
        </div>

css代码如下:

　　　　　　　　.back{
                height: 70px;
                width: 70px;
                border-radius: 50%;
                background: #2e2e2e;
                text-align: center;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                /*使用动画*/
                animation: round 6s linear infinite;
            }
            .back img{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                vertical-align: middle;
            }
            /*定义动画*/
            @keyframes round{
                from{
                    transform: rotate(0deg);
                }
                to{
                    transform: rotate(360deg);
                }
            }
            .txt{
                width:200px;
                white-space: nowrap;
                overflow: hidden;
                /*使用动画*/
                animation: scroll 5s linear infinite;
            }
            /*定义动画*/
            @keyframes scroll{
                from{
                    transform: translateX(0px);
                }
                to{
                    transform: translateX(calc(-50% - 30px ));
                }
            }