厦门网站建设之页面打开时有拉开幕布的效果怎么做?

厦门网站建设  
演示查看
下载源代码 今天我们想与你分享一个简单的变形页面过渡效果。我们的想法是在移动的介绍页面后,创建了一个有趣的,看看flowy变身的SVG路径。对于动画,我们使用
anime.js和一些字母效果,我们使用
舒适。在我们演示使用,以展示效果的“前奏过渡”,不过这当然只是的许多用例这类网页过渡的一个。 这个演示是好心赞助
PageCloud,该网站建设者你一定会喜欢使用。 如果你想成为一个演示赞助商,你可以发现更多的信息
在这里。 注意:对于演示使用一些现代的属性,如
CSS Flexbox的
CSS变量没有回退,所以请在上最新的浏览器观看。 结构,使我们能够随着介绍的内容移动形状,如下所示: <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> 固定含量在介绍下面的内容,一旦我们移动介绍内容,它就会显露出来。与此同时,我们将变形SVG路径进入该定义的一个pathdata:ID。当创建两个路径,需要确保它们都具有点相同量,使得变形情况顺利。 我们希望你喜欢这个影响不大,并发现它有用!

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 厦门网站建设之页面打开时有拉开幕布的效果怎么做?
分享到:
赞(0)
广告位820*80