如何在页面加载时使用淡入 text/image

Question

我正在构建一个小型网站，希望在有人访问该网站时将文本（以及添加图像时的图像）淡入？

谢谢！

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
  <style>
      body {
          background-color: lightgrey;
      }
      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #333;
      }
      li {
          float: left;
      }
      li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
      }
      li a:hover:not(.active) {
          background-color: #111;
      }
      .active {
          background-color: #4CAF50;
      }
  </style>
  <style>
      p.one {
          border: 1px lightgrey;
          background-color: lightgrey;
          padding-top: 50px;
          padding-right: 30px;
          padding-bottom: 40px;
          padding-left: 0px;
      }
      IMG.displayed {
          display: block;
          margin-left: auto;
          margin-right: auto
      }
  </style>
</head>
<body>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">Our Routes</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
  <h1 align="center"> HOME </h1>
  <p class="one" , align="center"> Text Goes here
  </p>
</body>
</html>

Answer 1

http://codepen.io/JTBennett/pen/GorVRL [您的网站有淡入淡出和运动] http://codepen.io/JTBennett/pen/BjpXRo [以下说明的示例]

举个例子。 HTML 需要一个 div 包裹整个正文内容，如果你想让它一次全部淡入。寻找这个：

<div class="wrapper fade-in">

你可以用 CSS 做很多事情，我已经用了很多年了，我仍然时不时地学到一些新东西。

所有动画命令都会出现在您的 CSS 中，如下所示：

@keyframes fadeIn
  to { 
     opacity: 1; }

然后你的 div 将有一个 class 调用动画 (@keyframes):

.fade-in {
  animation: fadeIn 1.0s ease forwards;
  [other div properties can be included here]
}

HTML 将如下所示：

<div class="fade-in">
[content]
</div>

最后，您需要确保包含供应商代码以使其与所有浏览器兼容[这会增加相当多的代码，这就是为什么 jQuery 可能是更好的选择东西]：

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

供应商代码必须在 div class 中再次复制到 CSS:

.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}

使用 jQuery 可以更快地达到效果，正如您在此处的其他答案之一中看到的那样。

在你学会了手工制作之后，如果你想节省一点时间，我建议你使用这个 CSS3 动画生成器： http://cssanimate.com/

但请确保您首先理解它。

最后，这是 jQuery 执行类似功能的示例（虽然这次使用 SVG 而不是 divs，但过程相同）： http://codepen.io/JTBennett/pen/YwpBaQ

Answer 2

在 CSS 中，您可以通过隐藏元素（不透明度：0；）加载页面来在文档加载时淡入元素。然后在文档准备就绪后，您可以删除 class，只要它具有 css 属性的过渡——您就会产生效果。

CSS

div {
    transition: opacity 2s;
    opacity: 1;
}

.hidden {
    opacity: 0;
}

JS

$(document).ready(function(){
    $('.hidden').removeClass('hidden');
});

Answer 3

我不知道你有什么元素，但你可以做一些事情。

如果您使用 javascript 或 jquery，您可以轻松地使元素淡入。

Jquery:

$(document).ready(function(){
    $('.myItemClass').fadeIn();
});

你也可以只用 CSS

CSS:

/* The animation code */
@keyframes example {
    from {opacity: 0;}
    to {opacity: 1;}
}

.myClass {
    animation-name: example;
    animation-duration: 1s;
}

Answer 4

非常简单，甚至不需要 jquery，纯 CSS 和纯 Javascript。

CSS

body {
opacity:0;
transition: 300ms opacity;
}

Javascript

function pageLoaded() {
        document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;

如何在页面加载时使用淡入 text/image

How to use fade-in text/image on page is loaded

html

css

animation

fadein

onload