如何在页面上使用淡入文本/图像

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将有一个调用动画的类（@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;
  }
}

必须在CSS的div类中再次复制供应商代码：

.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而不是div，但是同样的过程）： http ： //codepen.io/JTBennett/pen/YwpBaQ

Answer 2

通过在CSS中加载隐藏元素（不透明度：0;）的页面，可以在文档加载时淡入元素。 然后在文档就绪时你可以删除该类，只要它具有该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

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

CSS

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

使用Javascript

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