css3 svg路径蒙版动画

css3 svg路径蒙版动画

具体看https://www.cnblogs.com/oubenruing/p/9568954.html

还有个更好控制的写法
<pre>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>{$title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<!-- Link Swiper's CSS -->
<include file="commonheader" />
</head>

<body>
<include file="jiazai" />
<include file="commonmokuai" />
<div class="showcontainer" style="display: block;">
<div style="width:60%; height: 7.5rem; position: absolute;left:0px;top:0px;">
<svg width="100%" height="100%" viewBox="0,0,246,120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<defs>
<mask id ="path1">
<path id="path" stroke="white" fill="none" stroke-width="20" d="M238,8L75.3,103.7c0,0-5.3,7.7-18,0S10.3,73,10.3,73" class="Path1"></path>
</mask>
</defs>
<image mask="url(#path1)" style="overflow:visible;" width="246" height="120" id="左下发光条" xlink:href="/moban/123.png">
</image>
</svg>

</div>
</div>
<script src="{$yuming}/js/TweenMax.js"></script>
<script src="{$yuming}/js/DrawSVGPlugin.min.js"></script>
<include file="commonfooter" />
<script type="text/javascript">
$(function() {
myTween = TweenMax.fromTo("#path", 1, { drawSVG: "0%" }, { drawSVG: "100%" });
// myTween.yoyo(true).repeat(-1);
})
</script>
</body>

</html>
</pre>

posted @ 2019-11-13 20:28  newmiracle宇宙  阅读(342)  评论(0)  编辑  收藏  举报