CSS如何实现简单动画（1）？

最新推荐文章于 2024-07-27 10:37:47 发布

qingqingwan

最新推荐文章于 2024-07-27 10:37:47 发布

阅读量283

点赞数

分类专栏： html css 文章标签： css html animation

本文链接：https://blog.csdn.net/m0_47130134/article/details/106458964

版权

html css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用css实现图片的淡入淡出：

 <style>
  		div>{
  			position:relative;
  			}
        div>img{
            position: absolute;
            left: 0;
            top: 0;
        }
        div>img:nth-child(1){
            opacity: 1;
            animation: img1 10s linear infinite;
        }
        div>img:nth-child(2){
            opacity: 0;
            animation: img2 10s linear infinite;
        }
        div>img:nth-child(3){
            opacity: 0;
            animation: img3 10s linear infinite;
        }
        div>img:nth-child(4){
            opacity: 0;
            animation: img4 10s linear infinite;
        }
        @keyframes img1{
             0%,20%{ opacity: 1;}
             25%,80%{opacity: 0;}
             95%,100%{opacity: 1;}
        }
        @keyframes img2{
            0%,20%{ opacity: 0;}
             25%,45%{opacity: 1;}
             50%,100%{opacity: 0;}
        }
        @keyframes img3{
            0%,45%{opacity: 0;}
             50%,70%{opacity: 1;}
             75%,100%{opacity: 0;}
        }
        @keyframes img4{
            0%,70%{opacity: 0;}
             75%,95%{opacity: 1;}
            100%{opacity: 0;}
        }
    </style>
</head>
<body>
    <div>
        <img src="../漫威/img/dm_pic01.jpg" alt="">
        <img src="../漫威/img/dm_pic02.jpg" alt="">
        <img src="../漫威/img/dm_pic03.jpg" alt="">
        <img src="../漫威/img/dm_pic04.jpg" alt="">
        
    </div>
</body>
</html>