Question

我目前被困在这里，我希望实现与this website相同的效果。但我不知道该怎么做。有人能够向我展示代码吗？

基本上，这个网站在开始时会显示几秒钟的徽标，然后淡出到div区域。我想制作自己的版本来显示我自己的徽标，然后淡入我希望向其他人展示的div区域中的内容。徽标都显示出来，div必须在同一个网页上。

请帮忙。

Answer 1

这根本不需要jQuery，可以很容易地用CSS完成。

这是一个示范：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title> Valid HTML5 documents require title tags </title>
    <style type="text/css">
        #logo {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 0;
            top: 0;
            width: 100%;
            height: 0;
            opacity: 0;
            background-color: #fff;
            pointer-events: none;
            cursor: default;

            transition: opacity 2.5s ease 5s, height 3s ease 7.5s;
            /*                 __^__    __^__      __^__    __^__
                                [1]      [2]        [3]      [4]

                [1] Time opacity takes to transition from 1 to 0;
                [2] Time opacity waits until it starts transitioning
                [3] Time height takes to transition from 100% to 0;
                [4] Time height waits until it starts transitioning (>= [1] + [2]);
            */
        }
        .preload #logo {
            opacity: 1;
            height: 100%;
        }
    </style>
</head>
<body class="preload" onload="document.body.className='';">
    <div id="logo"> YOUR LOGO HERE </div>
    <div id="content">
        <h1> wow, a title </h1>
        <p> yay, content </p>
    </div>
</body>
</html>

＆＃13;

那么，它是如何运作的？

<body>有preload类。加载（onload事件）后，该类将被删除。

虽然<body>有preload个班级，但div#logo会有opacity: 1和height: 100%。

只要<body>失去preload课程，div#logo就会opacity和height设置为0.但是transition财产停止从立即变为。

opacity等待5秒（延迟）以开始转换。

opacity需要2.5秒才能从1完全转换为0.

height等待7.5秒（不透明度为5s + 2.5s）以开始过渡。

height需要3秒才能从100％完全过渡到0。

您几乎不需要任何JavaScript就可以获得所需的效果，而且不需要外部框架。

jQuery Animation徽标淡出淡出

1 个答案: