关于css3:CSS百叶快速知识点

鼠标通过图片，全副显示
创立a，将b全副横过去！
而后b设置溢出暗藏，并且退出动画时帧速度为0.8
这里的图300其实是为了自适应高度

<template>
    <div class="a">
        <div class="b"><img src="1.jpg"></div>
        <div class="b"><img src="2.jpg"></div>
        <div class="b"><img src="3.jpg"></div>
        <div class="b"><img src="4.jpg"></div>
        <div class="b"><img src="5.jpg"></div>
    </div>
</template>


<style lang="less" scoped="scoped">
    .a {
        display: flex;

        .b {
            overflow: hidden;
            transition: all 0.8s;

            img {
                width: 300px;
            }

            &:hover {
                flex:0 0 auto
            }
        }
    }
</style>