我正在尝试对社交网络徽标应用相同的效果:https://www.pierrejacobson.com/
而不是使用CSS很棒,我想对图像进行处理,但无法按预期工作。
关于CSS,无需将代码放在此处。我在display: none;
上只有三个社交网络徽标。
您能帮我吗?
<div id="social_bar">
<div class="width_size">
<img alt="image enveloppe" class="email" src="email.png" />
<p>[email protected]</p>
<div id="network_logo">
<img alt="logo_facebook" id="fixed_facebook" src="facebook.png" />
<img alt="logo_youtube" id="fixed_youtube" src="youtube.png" />
<img alt="logo_instagram" id="fixed_instagram" src="instagram.png" />
<img alt="logo_facebook" id="facebook" src="facebook_blue.png" />
<img alt="logo_youtube" id="youtube" src="youtube_blue.png" />
<img alt="logo_instagram" id="instagram" src="instagram_blue.png" />
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>
<!--social_bar-->
<div id="logo_bar">
<div class="width_size">
<img alt="logo" src="logo-pierre-jacobson2.png" />
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="30" value="RECHERCHER..." />
<img alt="search" src="search-solid.svg" />
</div>
</div>
JS
const get_img = function(name){ return document.getElementById(name); };
const img_one = get_img("fixed_facebook");
const img_two = get_img("fixed_youtube");
const img_three = get_img("fixed_instagram");
const img_facebook = get_img("facebook");
const img_youtube = get_img("youtube");
const img_instagram = get_img("instagram");
img_one.addEventListener("mouseover", function (event) {
img_one.style.display = "none";
img_facebook.style.display = "inline";
});
img_two.addEventListener("mouseover", function (event) {
img_two.style.display = "none";
img_youtube.style.display = "inline";
});
img_three.addEventListener("mouseover", function (event) {
img_three.style.display = "none";
img_instagram.style.display = "inline";
});
img_one.addEventListener("mouseout", function (event) {
img_one.style.display = "inline";
img_facebook.style.display = "none";
});
img_two.addEventListener("mouseout", function (event) {
img_two.style.display = "inline";
img_youtube.style.display = "none";
});
img_three.addEventListener("mouseout", function (event) {
img_three.style.display = "inline";
img_instagram.style.display = "none";
});
从显示“无”到“内联”没有过渡。而是尝试使用“ opacity:0”和“ opacity:1”并设置“ transition:全部为0.2s缓解”;]
Display属性:
在您最初的问题中,您说您想使用display属性隐藏和显示图像,但是],您还声明希望将屏幕transition从一个到另一个。
绝对可以通过适当命名的CSS transition
属性进行转换
问题是display
属性无法设置动画。如果将元素配置为display: none;
,则页面将立即重新绘制,并删除了该元素。这意味着您需要使用其他属性,我们通常会使用opacity
或visibility
。这是这三个之间的区别:
display: none;
visibility: hidden;
opacity: 0;
这里是这些属性影响页面布局的不同方式的示例:
const context = document.querySelector("#examples"); const ele = context.querySelector.bind(context), hide = section => section.classList.toggle("hide"), onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section)); opacity = ele(".opacity"), opacity_button = ele("#oBtn"), visibility = ele(".visibility"), visibility_button = ele("#vBtn"), display = ele(".display"), display_button = ele("#dBtn"), toggle_button = ele("#tBtn"); onClickHide(opacity_button, opacity); onClickHide(visibility_button, visibility); onClickHide(display_button, display); toggle_button .addEventListener("click", function() { hide(opacity); hide(visibility); hide(display); });
html, body, #examples { width: 100%; height: 100%; box-sizing: content-box; margin: 0px; padding: 0px; } #examples section { display: flex; flex-direction: column; width: 100px; height: 100px; border: 5px solid black; margin: 5px; transition: all .5s ease-in-out; } #examples section.hide { border-radius: 100px; } #examples section.opacity { background-color: blue; color: white; } #examples section.opacity.hide { opacity: 0; } #examples section.visibility { background-color: purple; color: white; } #examples section.visibility.hide { visibility: hidden; } #examples section.display { display: block; background-color: red; color: white; } #examples section.display.hide { color: black; display: none; }
<main id="examples"> <section class="opacity">opacity <button id="oBtn">hide</button></section> <hr /> <section class="visibility">visibility <button id="vBtn">hide</button></section> <hr /> <section class="display">display <button id="dBtn">hide</button></section> <hr/> <button id="tBtn">Toggle All</button> </main>
注意:
opacity
,visibility
或display
-和 border-radius
。您应该首先注意到在display
示例中如何[[at all]]看不到border-radius
变化,其次,display
示例是唯一使元素折叠以使其不再占用的示例空间。opacity: 0;
与height: 0px; width: 0px;
结合起来,我们可以从页面上直观地删除该元素,同时还消除了它对其他元素的任何影响-表示该元素不会占用空间
和可转换] >。但是,在您的特定情况下(想要将图像更改为其他颜色),所有这些都是不必要的。您可以将img
标签换成div
标签,然后应用background-url属性获取图像(ae background-url: url("facebook.png");
)和hover
效果,该效果添加您要查找的background-color
。 #facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
注意:
您也可以将background-blend-mode
调整为其他选项,以更改图像和颜色的组合方式。 a.e.background-blend-mode: luminosity;
将使颜色变浅background-blend-mode: color-dodge;
将使颜色变深并添加“减淡”效果。随意玩!
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
<div id="social_bar">
<div class="width_size">
<p>[email protected]</p>
<div id="network_logo">
<div alt="logo_facebook" id="facebook"></div>
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>