yeecai/front-end-trivia

#css spinning

Opened this issue · 1 comments

yeecai commented 
<html>
<img src="./closing.png" id="loading-img" />
<img src="./loading.svg" id="loading-img" />
<style>
    /*动画效果*/
    #loading-img {
        /* display: block; */
        /* margin: 20px auto; */
        /* width: 30px; */
        /*animation (动画) :绑定选择器, 4s完成动画 linear(匀速) infinite(循环) */
        animation: loading 4s linear infinite;
    }

    /*通过@keyframes规则,能够创建动画 , que 定义动画的名称 可自己定义*/
    @keyframes loading {

        /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
        0% {
            /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
            transform: rotate(0deg);
        }

        /* 100% {
            transform: rotate(360deg);
        } */

        from {
            /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

</html>