动画 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .bg{
            width: 100px;
            height: 100px;
        }
        img{
            width: 100px;
            height: 100px;
            animation: test .5s 3 0s normal;
        /*    .3s一次，执行5次， 延迟0秒  */
        }
        @keyframes test {
            /* from表示动画的开始位置 也可以使用 0% */
            from{
                opacity: 1;
            }

            /* to动画的结束位置 也可以使用100%*/
            to{
                opacity: 0;
            }
        }
    </style>
</head>
<body>
 <div class="bg">
     <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
 </div>
<script>

</script>
</body>
</html>

 

posted @ 2021-09-04 15:54  javascript9527  阅读(24)  评论(0)  编辑  收藏  举报