如何让我的 LinkedIn 徽章过渡平滑淡入淡出？

Question

How do I make my LinkedIn badge transition smoothly fade in and out?如何让我的 LinkedIn 徽章过渡平滑淡入淡出？

I know the basics of Web Developing and I have been using and learning HTML and CSS on visual studio code for 3 or 4 days, recently I was creating a personal website which is still in the making and I came across a confusion in which the transition command of CSS is not working for me I don't know why I want the LinkedIn badge to Fade in and Fade out in approximately 2 or 3 seconds smoothly but it is not letting me.我知道 Web 开发的基础知识，我一直在使用和学习 HTML 和 CSS 在视觉工作室代码上 3 或 4 天，最近我遇到了一个个人网站，它仍然处于过渡阶段CSS 的命令对我不起作用我不知道为什么我希望 LinkedIn 徽章在大约 2 或 3 秒内顺利淡入和淡出，但它没有让我。

This is the Code: https://jsfiddle.net/JadeDoe/1jvs6rhy/9/这是代码： https://jsfiddle.net/JadeDoe/1jvs6rhy/9/

CSS: CSS：

    .badge-base {
        display: none;
        position: absolute;
        top: 24px;
        left: 16%;

        transition: 1s;
    }

    .Heading:hover+.badge-base {
        display: inline;
    }

    .Heading:hover .badge-base,
    .badge-base:hover {
        display: block;
    }

Answer 1

You can't transtion display none to block.您不能将 display none 转换为阻止。 You can however do it using opacity (although it's not the exact thing because the element would still take up space)但是，您可以使用不透明度来做到这一点（尽管这不是确切的事情，因为该元素仍会占用空间）

 .badge-base { position: absolute; top: 24px; left: 40%; transition: 1s; opacity: 0; pointer-events: none; }.Heading:hover+.badge-base { display: inline; opacity: 1; pointer-events: all; }.Heading:hover.badge-base, .badge-base:hover { display: inline; opacity: 1; pointer-events: all; }

 <body> <div> <h1 class="Heading">Jane D Walker</h1> <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="g-mail-assistance-704528251" data-version="v1"> <a class="badge-base__link LI-simple-link" href="https://pk.linkedin.com/in/g-mail-assistance-704528251?trk=profile-badge"></a> </div> </div> <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script> </body>

如何让我的 LinkedIn 徽章过渡平滑淡入淡出？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-09-23 20:59:26

如何让我的 LinkedIn 徽章过渡平滑淡入淡出？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-09-23 20:59:26

解决方案1
0 已采纳 2022-09-23 20:59:26