ie浏览器动画显示飞出屏幕外

html-css07

ie浏览器动画显示飞出屏幕外,第1张

当你在IE浏览器中看到动画飞出屏幕外时，这通常是由于浏览器的缓存不足或者浏览器的设置有问题导致的。因此，要解决这个问题，您需要清理浏览器的缓存，重新设置浏览器的设置，以及检查浏览器是否有更新。您还可以尝试使用其他浏览器，比如Chrome或Firefox，来解决这个问题。如果以上方法都不能解决您的问题，您可以尝试重新安装IE浏览器，或者联系相关技术支持人员来帮助您解决问题。

<style>

.item{float:leftposition: relative}

.item div{width:100pxheight:100px}

.item div img{width:100pxheight:100px}

.item:hover div{width:120pxheight:120pxposition: absolutetop:10pxleft:10px}

.item:hover div img{width:120pxheight:120px}

<style>

<div id='items'>

<div class='item'><div><img src='a.jpg' /></div></div>

<div class='item'><div><img src='a.jpg' /></div></div>

<div class='item'><div><img src='a.jpg' /></div></div>

<div class='item'><div><img src='a.jpg' /></div></div>

</div>

以上只是思路

这种方式，只用css就可以实现。 不过没有平滑的动画特效，并且图片也会因为放大缩小失真。最好用js实现。

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

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

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

很简单利用绝对定位即可

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

1.移动

2.缩小

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

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

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