如何实现不规则的图片运动

佚名 6年前 (2019-04-11) 随笔 2184人围观抢沙发百度已收录

今天设计提出了一张图（由三张小图组成）需要实现当鼠标hover上之后当前图片扩大到当前区域大小同时其它图片同步缩小到宽度为0

其实如果是简单的三栏布局这样的运动是很容易实现的

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

不过由于图片是不规则的所以一下子难到了自己

后来百度了半天也没找到想要的答案附带着还看了一下canvas和svg 还是感觉实现不了

最后实在没办法了问了小伙伴他告诉我css3的skew可以实现不规则的图形看了文档后我一下子就明白怎么做了还是很容易实现的~

代码如下：【参考MY NOTE：实现不规则图片的运动】

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现不规则图片运动</title>
<style>
.wrapper {
　　width: 900px;
　　height: 400px;
　　background: #aaa;
　　margin: 0 auto;
　　overflow: hidden;
}

.wrapper div {
　　float: left;
}

.wrapper .box {
　　width: 1200px;
　　height: 100%;
　　transform: translateX(-80px);
}

.wrapper .box1 {
　　width: 600px;
　　height: 100%;
　　transform: skew(-20deg, 0deg);
}

.wrapper .box2 {
　　width: 200px;
　　height: 100%;
　　transform: skew(-20deg, 0deg);
}

.wrapper .box3 {
　　width: 300px;
　　height: 100%;
　　transform: skew(-20deg, 0deg);
}

.wrapper .box div {
　　overflow: hidden;
}

.wrapper .box div img{
　　width: 1200px;
}

.wrapper div.active {
　　width: 100%;
　　height: 100%;
　　transition: all linear 1s;
}

.wrapper div.no-active {
　　width: 0%;
　　height: 100%;
　　transition: all linear 1s;
}
</style>
</head>

<body>
<div class="wrapper">
　　<div class="box">
　　　　<div class="box1">
　　　　　　<img src="http://pic1.win4000.com/wallpaper/e/59b772f148372.jpg" alt="">
　　　　</div>
　　　　<div class="box2">
　　　　　　<img src="http://file06.16sucai.com/2016/0519/8d843e1a6df635a8feff1220b87a36ef.jpg" alt="">
　　　　</div>
　　　　<div class="box3">
　　　　　　<img src="http://cdn.duitang.com/uploads/blog/201509/24/20150924125416_KNc4f.thumb.700_0.jpeg" alt="">
　　　　</div>
　　</div>
</div>
</body>


<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
　　$('.box div').mouseenter(function () {
　　$(this).addClass('active');
　　$('.box div').not($(this)).addClass('no-active')
　　// $('.box div').addClass('no-active');
　　// $(this).removeClass('no-active').addClass('active');
　　})
　　$('.box div').mouseleave(function () {
　　$('.box div').removeClass('active').removeClass('no-active');
　　})
</script>

</html>

主要实现方法：通过鼠标mouseenter 和 mouseleave事件分别给不同的图片添加class属性不同的class有不同的样式然后通过tralsition添加渐变运动来实现动画 【知识点参考网址：https://www.zhihu.com/question/21725826】