做网页时看到网页随着往下拉时候，后面的文字和图片从左右飞入到中间那是什么效果啊！

html-css022

做网页时看到网页随着往下拉时候，后面的文字和图片从左右飞入到中间那是什么效果啊！,第1张

这个特效我就不写出来了，告诉你原理吧，网上有很多类似的效果可以下载。这个特效分为两步，第一步是把文字和图片做一个从左至右的动画效果，一般用CSS3或者JS可以轻易的实现，第二步获取滚动条的定位，当滚动条到达某个位置触发第一步的动画。希望能帮助到你！

将animation2改为

@-webkit-keyframes animation2{

    from{margin-left:0}

    to{margin-left:185pxopacity:1}

}

@-moz-keyframes animation2{

    from{margin-left:0}

    to{margin-left:185pxopacity:1}

}

对于几乎每一个入行前端的小伙伴来说,轮播图几乎都是必修课,但是，只是单纯的切换过渡可能并不能满足于你追求酷炫的心hh，那么这里就教你利用css3的clip-path来模拟碎片并为你的轮播图添加碎片轮播的效果！

对于一张图片来说，如果在原有的基础上添加一层蒙版，遮蔽住不想让用户见到的视图,剩下的视图即可作为一个'碎片',这层蒙版效果我们怎么制作？答案就是利用clip-path

因此,利用clip-path就可以做出一个一个碎片!

很简单利用绝对定位即可

其实也很简单，仔细看文首gif你会发现碎片的飞出动效无非是两种

1.移动

2.缩小

那么飞入动效也只是飞出动效的反转而已！

每次点击轮播切换按钮时，只需要动态的添加up-leave up-enter down-leave down-enter 即可完成碎片轮播的效果！

PS：缩小动画得注意变形基点，否则变形基点默认位于图片中部而不是碎片中部，放缩的效果会大打折扣！