今天我们想与你分享一个简单的变形页面过渡效果。我们的想法是在移动的介绍页面后，创建了一个有趣的，看看flowy变身的SVG路径。对于动画，我们使用anime.js和一些字母效果，我们使用舒适。在我们演示使用，以展示效果的“前奏过渡”，不过这当然只是的许多用例这类网页过渡的一个。
这个演示是好心赞助PageCloud，该网站建设者你一定会喜欢使用。
如果你想成为一个演示赞助商，你可以发现更多的信息在这里。
结构，使我们能够随着介绍的内容移动形状，如下所示：
<pre class="brush:html hljs xml"><code><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"content content–intro"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"content__inner"</span>></span>
<span class="hljs-comment"><!– … –></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"shape-wrap"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"shape"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"100vh"</span> <span class="hljs-attribute">preserveAspectRatio</span>=<span class="hljs-value">"none"</span> <span class="hljs-attribute">viewBox</span>=<span class="hljs-value">"0 0 1440 800"</span> <span class="hljs-attribute">xmlns:pathdata</span>=<span class="hljs-value">"http://www.codrops.com/"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">path</span>
<span class="hljs-attribute">d</span>=<span class="hljs-value">"M -44,-50 C -52.71,28.52 15.86,8.186 184,14.69 383.3,22.39 462.5,12.58 638,14 835.5,15.6 987,6.4 1194,13.86 1661,30.68 1652,-36.74 1582,-140.1 1512,-243.5 15.88,-589.5 -44,-50 Z"</span>
<span class="hljs-attribute">pathdata:id</span>=<span class="hljs-value">"M -44,-50 C -137.1,117.4 67.86,445.5 236,452 435.3,459.7 500.5,242.6 676,244 873.5,245.6 957,522.4 1154,594 1593,753.7 1793,226.3 1582,-126 1371,-478.3 219.8,-524.2 -44,-50 Z"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">path</span>></span>
<span class="hljs-tag"></<span class="hljs-title">svg</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!– /content–intro –></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"content content–fixed"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"content__inner"</span>></span>
<span class="hljs-comment"><!– … –></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!– /content–fixed –></span></code></pre>
我们希望你喜欢这个影响不大，并发现它有用！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/262555.html