css动画transition和animation实现遮罩动画

最新推荐文章于 2023-07-19 18:23:47 发布

至尊绝伦

最新推荐文章于 2023-07-19 18:23:47 发布

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_51636525/article/details/124370233

版权

本文介绍了如何使用CSS的transition和animation属性来创建遮罩动画。transition通过hover事件实现元素渐显渐隐的效果，而animation则允许在hover时执行多次动画，移开时遮罩立即消失。通过对比两者在实现遮罩动画上的差异，帮助开发者根据项目需求选择合适的动画方式。

摘要由CSDN通过智能技术生成

用两种属性实现遮罩动画

transition在hover和移开的时候都会有渐变动画

animation只有在hover的时候有渐变动画，移开图片遮罩层直接消失

                <ul class="other-skin">
                    <li>
                        <a class="item" href="#">
                            <img src="./img/xiahoudun.jpg" alt="">
                            <div class="mask">匿光决锋者-夏侯惇</div>
                        </a>
                    </li>
                    <li>
                        <a class="item" href="#">