一套延迟逐渐放大动画的代码

一套延迟逐渐放大动画的代码

admin 2021-05-29   310

这是一个例子,写下笔记记录下,也可以作为参考!

html部分:

<div class="list-from-center ani-trigger">内容</div>

css部分:

<style>
/*入场效果*/
[class^=' list-from-'], [class*=list-from-] {
    transition: .2s cubic-bezier(.175,.885,.32,1);
}
[class^=' list-from-'], [class*=list-from-].in {
    transform: scale(1) translate(0,0);
    opacity: 1;
}
.list-from-center
{
    transform: scale(.8) translate(0, 50%);
    opacity: 0;
}
</style>

尾部js部分:

<script>
onload=function()
{
setInterval(function(){
 $('.ani-trigger').addClass('in');
},300);
}
</script>

 

小结:

html的div class中js绑定ani-trigger,ani-trigger可以有css属性,js只把它当成目标,然后在它之后赋予in!

转载请注明原文地址: https://www.xiansay.com/?read-21.html
最新回复 (0)