代码之家 › 专栏 › 技术社区 › AnnaSm

如何使用SVG路径创建窗帘效果?

svg css3 html5 css html

-1

AnnaSm · 技术社区 · 7 年前

我的灵感来自这里看到的页面加载窗帘效果: https://www.epicurrence.com

这是一个屏幕记录:

谢谢

1 回复 | 直到 7 年前

1

3

Paul LeBeau 7 年前

使用SVG进行复制是相当简单的。

我们所做的就是等待单击,然后在三个路径形状之间设置动画:

一个长方形,底部为半圆形,靠近页面顶部
一个零高度的矩形,位于页面顶部。

当动画结束时,我们隐藏SVG以显示后面的页面。

(单击黑色部分以开始动画)

var curtain = document.getElementById("curtain");

curtain.addEventListener("click", function(evt) {
  // Call beginElement() on the <animate> element to start the animation running
  document.getElementById("curtainAnimate").beginElement();
});

/* Make the SVG fill the screen */
svg {
  display: block;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
}

<h1>Test page</h1>

<p>Lorem ipsum dolor sit amet, an possit conceptam per. Et lorem qualisque deterruisset mei. Et doctus dissentias vim. Sit inciderint eloquentiam eu, vel diceret veritus patrioque eu, per in congue causae salutatus.</p>

<p>Posse iriure ut nam, tempor veritus vis ex. Ex viris legendos salutatus eos, eam primis meliore signiferumque an. Graeci civibus similique ius ad. Diam ponderum laboramus per ex, autem denique probatus mei in. Vel in saepe mucius tamquam, pri ex iusto graeco comprehensam. Usu deserunt mediocrem et. Quo iisque ullamcorper cu.</p>

<p>Ex vis vero signiferumque, eum quem lobortis an. Eu vidisse erroribus intellegam sed, velit vituperata in vis. Ad omnis mundi dicam eam, ut mea malorum expetendis voluptatum, mea agam option no. Ei pro vero mediocrem. Nam ea velit facete, suas graeci omnesque cum et. At vix invidunt neglegentur, porro ullum numquam id vim.</p>

<p>Sale fabulas sed no, at mel ullum facilis omittantur. In nam zril vitae graece, vis id facete tamquam. Cu discere numquam percipitur mea. Duo nominati evertitur ex, meis impedit forensibus mei ad.</p>

<p>Veniam mucius at mei. Vel ad aliquip accusamus posidonium, his aperiri nonumes cu. Ei duo deleniti repudiare adipiscing, agam impedit per ut. No dicat utinam homero ius, ut ius impedit posidonium reprehendunt.</p>

<svg id="curtain" viewBox="0 0 100 100" preserveAspectRatio="none">
  <path fill="#333" d="M 100,0 L 0,0 L 0,130 c 0,-17, 23,-30, 50,-30 c 27,0, 50,13, 50,30 Z">
    <animate id="curtainAnimate" attributeName="d"
             begin="indefinite" dur="1s" fill="freeze"
             keyTimes="0; 0.7; 1"
             values="M 100,0 L 0,0 L 0,130 c 0,-17, 23,-30, 50,-30 c 27,0, 50,13, 50,30 Z;
                     M 100,0 L 0,0 L 0,50  c 0,-17, 23,-30, 50,-30 c 27,0, 50,13, 50,30 Z;
                     M 100,0 L 0,0 L 0,0   c 0,0, 50,0, 50,0       c 0,0, 50,0, 50,0 Z"/>
  </path>
  <!-- Hides the SVG when the path animation ends -->
  <set begin="curtainAnimate.end" attributeType="CSS" attributeName="display" to="none"/>
</svg>