Question

是否可以像加载网页时一样添加转换功能，例如当您将鼠标悬停在具有转换效果的div上时。 example: cubeupload.com

Answer 1

你可以这样做，但不能只使用css3和html5开箱即用！即使不依赖较重的框架，你可以做的是应用于各种元素的onload事件，并在onload事件触发时附加一个css类！

让我们说你的身体的css看起来像这样：

body {
    opacity : 0;
    transition : opacity 1s ease; 
}

.loaded {
   opacity : 1;
}

然后你可以在javascript中执行类似的操作：

<body onload="this.classList.add('loaded')">

在某些浏览器中，body元素中的this变量未被真正识别，最好使用document.body！

<body onload="document.body.classList.add('loaded')">

这使您可以自由地在css transform : all 1s ease;内同时使用各种css属性，而无需学习新框架的麻烦！

这是一个有效的例子

<!doctype>
<html>
    <head>
        <style>

            body { background: orange; -webkit-transition: all 1s ease; transition: all 1s ease; }

            .loaded { background: red; }

        </style>

        <script>function loaded (el) { el.classList.add('loaded') }</script>

    </head>
    <body onload="loaded(document.body)">

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </body>
</html>

注意：根据要求，这是一个html5 / css3解决方案！旧浏览器可能不支持css transitions或classList属性！

Answer 2

如果您希望整个页面具有过渡效果：

$(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(2000);
});

预览jsFiddle：http://jsfiddle.net/tXeks/

Answer 3

当然。

只需使用jQuery和jQuery.blockUI插件，然后使用以下代码：

<script language='javascript' type='text/javascript'>
$(document).ready(function(){
    $.blockUI();
    $(window).load(function(){
        $.unblockUI();
    });
});
</script>

在这种情况下，当页面准备好时，将显示该块，并且当加载整个页面时，将隐藏块。：）

Answer 4

例如，您的示例，纯CSS解决方案：

a:hover { color:white; }

这会使链接文本颜色在悬停时变为白色。

您可以使用CSS过渡为其设置动画。 http://www.w3schools.com/css3/css3_transitions.asp

Answer 5

最好是使用普通的javascript，因为你需要等待经常在页面末尾加载的jquery，加载页面的事件。在身体后添加

 <script type="text/javascript">
  var sheet = document.createElement('style');
  sheet.innerHTML = "#main {opacity:0;}"; // your main content
  element = document.getElementById('wrapper'); // your 'main content wrapper
  element.appendChild(sheet);
  setTimeout(function(){ 
    sheet.innerHTML = "#main {opacity:1;}";
    element.appendChild(sheet); 
  }, 400); // time to wait to start transition
    </script>
  <div class="wrapper">
      <div id="main">Magic happens here</div>
 </div>

如何在加载网页时添加转换

5 个答案: