2

CSS百叶快速知识点

 3 years ago
source link: https://segmentfault.com/a/1190000039108785
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

CSS百叶快速知识点

发布于 1 月 27 日

image.png

鼠标经过图片，全部显示
创建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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK