Question

有没有人知道如何制作一个循环的＆＃39;揭示＆＃39;效果，以便我的DOM元素从页面中心显示出来，圆圈越来越大。

Answer 1

你可以尝试＆＃34;隐藏＆＃34;具有掩码div的内容具有透明背景和覆盖整个页面的大box-shadow。使用border-radius:100%，您可以确保它是一个圆圈：

＆＃13;

$('body').on("click", function() {
	$(this).toggleClass('reveal');
})

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  padding: 2em;
  font-family: sans-serif;
  line-height: 1.5;
  background: hotpink;
  color: #FFF;
  box-sizing: border-box;
}

h1 {
  color: yellow;
}

/* the mask */

#mask {
    position: fixed; top:50%; left: 0; right: 0; margin: auto;
    width:0px; height:0px; border-radius: 100%; z-index: 99;
    transform:translateY(-50%) scale(1);
    box-shadow: 0 0 0 60em #FFF; /* big shadow */
    transition:1s;
}

.reveal #mask {
  width:100vw; height:100vw;
  transform:translateY(-50%) scale(1.5);
  pointer-events: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mask"></div>

<h1>Masking</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam maiores, placeat. Est unde provident placeat deleniti, modi ea. Corporis iste dolorem ullam culpa. Asperiores illum harum, possimus cum ad doloribus.</p>
<p>Ab soluta quidem quibusdam ullam error sapiente officiis, dolorum unde dolore corporis maiores delectus voluptate assumenda veniam? Nostrum eius ad sequi, nemo eos porro libero, nam, magni, perspiciatis fuga soluta!</p>
<p>Blanditiis maxime unde perspiciatis repudiandae ipsum, in nihil possimus officiis? Minus, perferendis debitis doloribus sint repellendus accusamus recusandae pariatur quisquam asperiores temporibus optio in. Quia quas nihil fugiat omnis hic?</p>
<p>Error cum tenetur cupiditate dolore, possimus vitae. Optio fuga ipsam sit amet modi unde, officia quo, tempore obcaecati quis, nihil. Natus, ducimus deserunt, minus consequuntur accusamus minima mollitia voluptatum optio.</p>
<p>Quibusdam, dolor deserunt. Quia quo, deleniti saepe perspiciatis. Delectus dolorum labore quidem debitis excepturi facilis assumenda magni ex. Architecto illum tenetur, harum nulla consequatur debitis aut sint officiis praesentium similique.</p>

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/7o3jcsbt/

透视动画通过课程转换工作，看到它在行动中，点击页面中的任意位置以显示＆＃34;内容（jQuery切换）。

注意：这是我创建的基本实验演示，可能需要在生产环境中实施之前进行一些测试。

Spotlight用CSS / jQuery从页面中心显示动画？

1 个答案: