Question

我正在制作一个标题，标题放在导航栏上方。当用户开始向下滚动页面时，标题会随着CSS过渡而缩小，徽标会被“裁剪”，并且移动它的位置以适应缩小的标题。这非常有效。但是，我正试图找到一种方法来为徽标上的“裁剪”制作动画。我目前得到的是动画徽标的重新定位。

这是一个小提琴：https://jsfiddle.net/3ehg1hLf/

是否有可能在徽标类上进行转换，以便为其减少动画而不是它的位置？

我的HTML如下：

<div class="container-fluid no-pad">
<div class="navbar navbar-fixed-top">
    <div class="row xyz">

        <div class="col-xs-4">
            <span class="logo"><img src="http://i.imgur.com/5MchhVA.png?1" /></span>
        </div>

    </div>
</div>

CSS：

body {
    margin: 0;
    border: 0;  
}

.no-pad {
    padding: 0;
}


.xyz {
    max-width: 1280px;
    height: 91px;
    background: blue;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    /* For Scroll Transition */
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out;
}

.col-xs-4 {
  padding-top: 3px;
}

.cropxyz {
            height: 50px;
        }

    .logo {
            width: 100%;
        }

        .crop360 {
            display: inline-block;
            width:129px;
            height:36px;
            overflow:hidden;
            margin-top: 8px;
            /* For Scroll Transition*/
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            -o-transition: all .4s ease-in;
            transition: all .4s ease-in; 
        }

        .crop360 img {
            position:relative;
            /*width: 100%;*/
            top: 40%;
            transform: translateY(-50%);

        }

Answer 1

我是这样做的：

将徽标元素与height一起使用，而不是使用img元素
在“较小”模式下，降低元素的background-position:center
{{1}}确保它是裁剪的顶部和底部

例如： https://jsfiddle.net/scnfbzek/

图像上人造作物的CSS转换

1 个答案: