我有一个带有侧边栏的网页。顶部是一个徽标。当侧边栏折叠(变小)时,徽标也随之变小。而不是发生这种情况,我想过渡(动画)到另一个标志而不是。
因此,较大的徽标基本上会淡入另一个徽标中。
我喜欢使用css或jquery,尽管我不是专家。所以我想知道是否有人能帮我?
当它变小时,你只能看到CT,我想转换一下徽标。
示例:
发布于 2018-08-21 05:25:56
您可以将您的图片作为背景图片,然后使用媒体查询进行更改。在这种情况下,转换是可行的。
例如:
.box {
width: 141px;
height: 100px;
transition: 500ms;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
-o-transition: 500ms;
background-image: url(images/picture.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@media only screen and (min-width:800px) {
.box {
background-image: url(images/gym.png);
}
}
<body>
<div class="box"></div>
</body>
发布于 2018-08-21 05:12:06
你可以使用"content“属性CSS。当侧边栏折叠时,您可以设置较小徽标的新url,并使用转换来动态更改。
我希望它能对你有所帮助。致以最好的问候,伊曼纽尔
发布于 2018-08-21 06:35:08
尽管使用纯CSS可以做到这一点,但使用jquery
会更容易。下面是一个例子
$('.logo-btn').click(function() {
$('.logo-large').toggleClass('hide');
});
nav {
height: 60px;
background: #f7f7f7;
display: flex;
align-items: center;
}
nav > span {
height: 100%;
display: flex;
align-items: center;
background: #2b2b2b;
width: fit-content;
padding: 0 40px;
color: white;
font-size: 1.2em;
transition: all 500ms ease;
white-space: nowrap;
}
.hide {
width: 0;
padding: 0;
opacity: 0;
}
button {
margin-left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<span>CT</span>
<span class="logo-large">Creative Tim</span>
<button class="logo-btn">click me</button>
</nav>
当然,您可以尝试并调整CSS以使动画更流畅。
https://stackoverflow.com/questions/51938476
复制相似问题