加载时背景淡入

我正试图让我的背景在进入网站时淡出。我试过几种有效的方法。然而，我只是难以将背景集中在不同的分辨率上。正如你目前在进入我的网站时看到的那样，每当你调整浏览器的大小时，背景总是在中间。网址：http://studi0.ml/这正是我正在努力实现的目标，但地球在任何时候都处于中间。我的背景是纯CSS。请记住，我刚开始网站设计。我已经试着编码了2-3周了。

html,
body {
  background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: background 0.0s linear;
  -moz-transition: background 0.75s 0.0s linear;
  -o-transition: background 0.75s 0.0s linear;
  transition: background 0.75s 0.0s linear;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

如果您希望背景图像在页面加载时淡出，我建议您使用不同的设置。您可以在与页面其他部分不同的流中有一个单独的div，并在页面加载时将其设置为不透明度1。

HTML

<html>
<head> ... </head>
<body>
    <div class="page-bg"></div>
</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
}
body {
    position: relative;
}
.page-bg {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
    background-size: cover;
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode:forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

当然，您可能需要为animation和keyframes声明添加polyfill（即-moz-animation-name、-webkit-animation-name等）

以下是Plunkr的一个工作示例。我不得不将你使用的图像与带有https链接的图像交换，这样加载它就不会出现问题。

如果我们只是想淡化div的bg颜色，我们可以使用：

.field-error {
    color: #f44336;
    padding: 2px 5px;
    position: absolute;
    font-size: small;
    background-color: white;
}
.highlighter {
    animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
    -moz-animation: fadeoutBg 3s; /* Firefox */
    -webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
    -o-animation: fadeoutBg 3s; /* Opera */
}
@keyframes fadeoutBg {
    from { background-color: lightgreen; } /** from color **/
    to { background-color: white; } /** to color **/
}
@-moz-keyframes fadeoutBg { /* Firefox */
    from { background-color: lightgreen; }
    to { background-color: white; }
}
@-webkit-keyframes fadeoutBg { /* Safari and Chrome */
    from { background-color: lightgreen; }
    to { background-color: white; }
}
@-o-keyframes fadeoutBg { /* Opera */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

<div class="field-error highlighter">File name already exists.</div>

类似地，您可以在from和to部分（如color: green）中实现任何样式更改，将字体颜色更改为绿色，或者如果您想使用：

1）淡入：将opacity: 0赋予opacity: 1
2）淡出：将opacity: 1赋予opacity: 0

有关更多详细信息，请参阅https://stackoverflow.com/a/58525787/1904479

相关内容

最新更新

热门标签：