Question

这适用于带有CSS和Javascript的HTML网站。

我正在尽力归档下面的内容，但我没有得到所需的内容。

这是徽标，它是一个文本，当页面加载时会放大和缩小，然后就会放置并放置到位。

实施例： 1.在页面加载时，文本＆＃34; Hello＆＃34;缩放尺寸200％从顶角朝向页面中心开始 2.页面加载继续 - 说50％的页面加载，文本向中心的缩放是500％ 3.页面加载完成 - 文本＆＃34;你好＆＃34;已成为缩放800％的中心 4.暂停3秒钟 5.向左上角缩放500％（标志位置） 6.缩小至200％朝向左上角（徽标位置） 7.到达徽标时淡出 8.徽标出现

HTML Div：

<div id="hello">
<h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>

JS：

function pageFullyLoaded()
{
    var elem = document.getElementById("hello");
    elem.style.zoom = "500%";
}

Answer 1

尝试使用.animate()

// 3. Page load completes - the text "hello",
// has come to center with zoom 800%
$("#hello").animate({
  zoom: "800%",
  left: window.innerWidth / 2
}, 3000, function() {
  // 4. Pause for 3 seconds
  $(this).delay(3000)
  // 6. zooms out to 200% heading towards left top corner,
  // (logo position) 
  // 7. Fades out when reaching the logo 8. Logo appears
  .animate({
    zoom: "200%",
    left:0
  }, 3000, function() {
    $(this).fadeOut()
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello">
  <h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>

在html加载上缩放文本并在同一页面上的不同位置淡出

1 个答案: