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 ));
                } }