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>

css3 svg路径蒙版动画的更多相关文章

  1. svg路径蒙版动画

    svg路径蒙版动画,是比较实用的一种动画效果,能够绘制如下图所示的动画. 接下来细说这样的动画是如何做成的: 1.准备工作 2.SVG路径动画 3.SVG路径蒙版动画 4.复杂图形的编辑技巧 1.准备 ...

  2. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  3. 使用snapjs实现svg路径描边动画

    一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问题,结果就这样变难了呀,在网上查一会之后,突然 ...

  4. CSS3/SVG clip-path路径剪裁遮罩属性简介

    一.SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属 ...

  5. css3 svg 物体跟随路径动画教程

    css3 svg 物体跟随路径动画教程https://www.jianshu.com/p/992488f3f3fc

  6. DrawSVG - SVG 路径动画 jQuery 插件

    jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...

  7. SVG路径动画解密

    原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已, ...

  8. CSS3全览_动画+滤镜

    CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...

  9. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

随机推荐

  1. OpenGL全流程详细解读

    导语 对于开发者来说,学习OpenGL或者其他图形API都不是一件容易的事情.即使是一些对OpenGL有一些经验的开发者,往往也未必对OpenGL有完整.全面的理解.市面上的OpenGL文章往往零碎不 ...

  2. go 学习笔记之解读什么是defer延迟函数

    Go 语言中有个 defer 关键字,常用于实现延迟函数来保证关键代码的最终执行,常言道: "未雨绸缪方可有备无患". 延迟函数就是这么一种机制,无论程序是正常返回还是异常报错,只 ...

  3. 代码审计-Thinkphp3框架EXP表达式SQL注入

    最近看java框架源码也是看的有点头疼,好多还要复习熟悉 还有好多事没做...慢慢熬. 网上好像还没有特别详细的分析 我来误人子弟吧. 0x01 tp3 中的exp表达式 查询表达式的使用格式: $m ...

  4. swoole与php协程实现异步非阻塞IO开发

    “协程可以在遇到阻塞的时候中断主动让渡资源,调度程序选择其他的协程运行.从而实现非阻塞IO” 然而php是不支持原生协程的,遇到阻塞时如不交由异步进程来执行是没有任何意义的,代码还是同步执行的,如下所 ...

  5. redis集群之Codis

    在大数据高并发场景下,单个 Redis 实例往往会显得捉襟见肘.首先体现在内存上,单个 Redis 的内存不宜过大,内存太大会导致 rdb 文件过大,进一步导致主从同步时全量同步时间过长,在实例重启恢 ...

  6. Kafka 权威指南阅读笔记（第三章，第四章）

    Kafka 第三章,第四章阅读笔记 Kafka 发送消息有三种方式:不关心结果的,同步方式,异步方式. Kafka 的异常主要有两类:一种是可重试异常,一种是无需重试异常. 生产者的配置: acks ...

  7. 拨云见日，彻底弄清楚Java日志框架 log4j, logback, slf4j的区别与联系

    log4j 以及 logback, slf4j 官网 日志框架的困惑 作为一个正常的项目,是必须有日志框架的存在的,没有日志,很难追踪一些奇奇怪怪的系统问题. 但是,我们经常在项目的依赖中,见到奇奇怪 ...

  8. django-Views之常见的几种错误视图代码（三）

    1.404 page not found(找不到对应的页面) 2.500 server error(服务器错误) 3.400 bad request(无效的请求) 4.403 HTTP forbidd ...

  9. join的使用

    我们还是以这四张表为例:1.left joinselect * from student a left join score b on a.sid=b.sid; 也就是说A中的元素都会显示,没有值的用 ...

  10. js中const，var，let区别

    1.const定义的变量不可以修改,而且必须初始化(常量) const b = 5 // 正确 // const b // 错误,必须初始化 // b = 4 // 错误,不可被修改 console. ...