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. lua多线程解决方案

    直观的讲:lua并不支持多线程,lua语言本身具有携程功能,但携程仅仅是一种中继器. lua多线程的目的:有并发需求时,共享一些数据. 例如使用lua写一个并发服务器.用户登陆之后,用户数据储存在lu ...

  2. git基础命令详解

    一些必须要知道的概念 git的三个工作区域:工作目录.暂存区.git仓库. 工作目录:其实就是本地文件磁盘上的文件或目录: 暂存区:是一个文件,保存了下次提交的文件列表信息,一般在git仓库目录中: ...

  3. Cocos2d-x 学习笔记(8) ActionManager

    1. 概述 ActionManager管理所有的action,调度所有的action,删除指定的action.每个action对应一个node对象,action存储在actions中,actions和 ...

  4. go-linux环境搭建

    下载 go1..linux-amd64.tar.gz 解压: tar zxvf go1..linux-amd64.tar.gz -C /usr/local 配置环境变量:vim  /root/.bas ...

  5. Vuex的简单应用

    ### 源码地址 https://github.com/moor-mupan/mine-summary/tree/master/前端知识库/Vuex_demo/demo 1. 什么是Vuex? Vue ...

  6. i春秋DMZ大型靶场实验(四)Hash基础

    下载工具包  打开目标机 通过目录爆破发现 phpmyadmin    在登录位置尝试注入 返现 可以注入 直接上sqlmap    上 bp 代理抓包 sqlmap.py  -r  bp.txt  ...

  7. fullpage.js的引入方法

    1.先到官网上(https://github.com/alvarotrigo/fullPage.js)下载压缩包 2.引入文件 3.布局基本页面结构 4.实现全屏滚动(JS代码) <script ...

  8. SpringBoot中如何灵活的实现接口数据的加解密功能？

    数据是企业的第四张名片,企业级开发中少不了数据的加密传输,所以本文介绍下SpringBoot中接口数据加密.解密的方式. 本文目录 一.加密方案介绍二.实现原理三.实战四.测试五.踩到的坑 一.加密方 ...

  9. Rancher与ARM深化战略合作，“软硬结合”加速边缘计算时代

    时至今日,许多企业已将边缘计算列为战略目标,对于部分企业而言,边缘计算则已成为它们势在必行的部分.而随着对应用软件和硬件能力的需求不断增长,容器和Kubernetes已发展为边缘计算领域备受瞩目的一项 ...

  10. 学习了解Shiro框架

    有关Shiro安全框架 实现权限的几种方式 1)通过表来实现 2)shiro框架 3)Spring Security框架 shiro有哪些主要功能 1.授权 访问控制的过程,即确定谁有权访问 2.身份 ...