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

用两种属性实现遮罩动画

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="#"><img src="./img/ailin.jpg" alt=""><div class="mask">匿光决锋者-夏侯惇</div></a></li><li><a class="item" href="#"><img src="./img/mingshiyin.jpg" alt=""><div class="mask">匿光决锋者-夏侯惇</div>    </a></li><li><a class="item" href="#"><img src="./img/baiqi.jpg" alt=""><div class="mask">匿光决锋者-夏侯惇</div></a></li></ul>

用transition实现

设置正常状态opacity为0 opacity:0

hover状态opacity为1 opacity:1

在正常状态设置要改变的值（可以写all代表全部）动画时间动画 transition:opacity 300ms ease-in

        .other-skin .item .mask {display: flex;//透明度为0opacity: 0;background-color: rgba(0, 0, 0, .88);//添加opacity动画 也可以写alltransition: opacity 300ms ease-in;}.other-skin .item:hover .mask {opacity: 1;}

用animation实现

设置正常状态不可见 display:none

设置动画名与动画过程 @keyframes maskframes{}

设置hover状态可见，并且加上动画 display:flex animation:maskframes 300ms ease-in

         .other-skin .item .mask {//正常状态不可见display: none;background-color: rgba(0, 0, 0, .88);}@keyframes maskframes {0% {opacity: 0;}100% {opacity: 1;}}.other-skin .item:hover .mask {//在hover状态可见 并且添加maskframes的动画display: flex;animation: maskframes 300ms ease-in-out forwards;}

transition写起来方便一点，但是必须要有事件触发，而且一般是只执行一次

animation写起来麻烦一点，可以重复执行多次

根据具体的需求选择动画属性

css动画transition和animation实现遮罩动画相关推荐

css使用定义动画anima,css3，transition，animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
gif透明背景动画_如何制作ae遮罩动画——手机ae——GIF豆豆/视频豆豆
表情in|GIF豆豆|视频豆豆--官网www.snapemoji.net 表情in_GIF豆豆_视频豆豆_ae教程官网www.snapemoji.net 应用详情 - 应用宝官网android. ...
css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
html 动画效果小车,ANIMATION经典小车动画
适用于多个活动场景 1.HTML 2.CSS .old-driver { width: 100%; height: 350px; position: relative; overflow: hidde ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
SRPG游戏开发（四十一）第九章战斗系统 - 三战斗动画（Combat Animation）
返回总目录第九章战斗系统(Combat System) 在SRPG中,大多数情况是指角色与角色之间的战斗.而这种战斗一般有两种模式: 地图中直接战斗: 有专门的战斗场景. 这两种模式的战斗在数据上 ...
【Flutter】动画学习(二) Animation
文章目录介绍基础动画 Animation AnimationController TweenAnimation CurvedAnimation AnimatedWidget FadeTransit ...
android image 位移动画_深入理解Android之动画
Android 里动画从用途上讲,可以分为三类View Animation(View动画)又称 Tween Animation(补间动画).Drawable Animation(帧动画) 和 Prop ...

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

css动画transition和animation实现遮罩动画相关推荐

最新文章

热门文章