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

23次阅读

共计 419 个字符，预计需要花费 2 分钟才能阅读完成。

鼠标通过图片，全副显示
创立 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>

正文完