vue项目中如何使用动画效果

鼠标滑入滑出图片逐渐放大的效果

<div class="video-item">
  <div class="video-img">
        <img src="../../assets/images/img1.jpg"/>
    </div>
</div>

scss

.video-item{
    height: 440px;
    background: $aColor;
    text-align: center;
    overflow: hidden;
    .video-img{
        width: 100%;
        height: 220px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            min-width: 100%;
            min-height: 220px;
            margin: 0 auto;
            transition: all 0.6s linear;
            &:hover{
                transform: scale(1.4);                
            }
        }
    }
}

Vue——关于css过渡和动画那些事
https://www.cnblogs.com/ly2646/p/9469551.html

猜你喜欢

转载自blog.csdn.net/qq_26833853/article/details/84397264
今日推荐