手风琴的切换效果
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：DW
作者：卢佳琪
撰写时间：撰写时间：2019年2月10日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
最近学习了一个新的知识，当时看到一个有趣的手风情，那个手风琴的功能是这样子的鼠标移到图片上时图片就在当前显示整一张相片，移到上面它就会缓慢打开，这样子看上去就有了动漫效果
鼠标移开后按照比例显示左边的一部分突出字眼，这样子就做到多广告的效果了
这个是怎么做的呢？看代码你就知道了，这就是一个简单的布局
还有一些简单样式，通css3就可以实现切换功能，css3中的一些简单的属性就把传统问题解决掉，不用去写那些复杂的js代码，这里面出现了一个新的属性cubic-bezier，在animation和transition两个属性中，cubic-bezier是控制变化的速度曲线，cubic-bezier称为三次贝塞尔曲线，主要是生成速度曲线的函数，规定是cubic-bezier(<x1>,<y1>,<x2>,<y2>) . 然后就给它两个伪类，当鼠标移上去
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
width: 570px;
height: 125px;
border-radius: 3px;
float: left;
margin-left: 10px;
transition: 0.5s cubic-bezier(0.95,-0.15,0.52,1.51);
overflow: hidden;
}
span{
display:inline-block;
width: 570px;
height: 125px;
}
ul{
width: 3500px;
height: 125px;
}
ul span:first-child{
background:#339CC8;
}
ul span:nth-child(2){
background:#DB19B5;
}
ul span:nth-child(3){
background:#DDD01C;
}
ul span:nth-child(4){
background:#D0191C;
}
ul span:nth-child(5){
background:#B1A8A8;
}
ul span:last-child{
background:#1318DC;
}
div{
width: 1200px;
height: 130px;
background-color: #33cc33;
margin: 100px auto;
padding: 20px;
overflow: hidden;
}
ul:hover li{
width: 108px;
}
ul li:hover{
width:575px;
}
</style>