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. 安装高可用Hadoop生态 （四） 安装Spark

    4.    安装Spark 4.1. 准备目录 -bin-without-hadoop.tgz -C /opt/cloud/packages/ -bin-without-hadoop /opt/clo ...

  2. 2018 php 面试

    排序算法 快速排序 快速排序是十分常用的高效率的算法,其思想是:先选一个标尺,用它把整个队列过一遍筛选,以保证左边的元素都不大于它,其右边都不小于它 function quickSort($arr){ ...

  3. Spring基础（二）

    一.使用注解配置Spring 1.1步骤 --配置文件中,指明注解位置 --要用的地方打上注解 --改对象的作用范围(修改掉默认的单例,变多例) --属性的注入(两种) 使用的反射实现 set方法实现 ...

  4. django开发中关于外键设置

    django开发中关于外键设置 我们建模型的时候会用到ForeignKey 而由于外键的约数会导致一些保存 所有我们ctrl+左键进入源码 源码 def __init__(self, to, on_d ...

  5. C#调用RabbitMQ实现消息队列

    前言 我在刚接触使用中间件的时候,发现,中间件的使用并不是最难的,反而是中间件的下载,安装,配置才是最难的. 所以,这篇文章我们从头开始学习RabbitMq,真正的从头开始. 关于消息队列 其实消息队 ...

  6. 拿起键盘就是干：跟我一起徒手开发一套分布式IM系统

    1.引言 老读者应该还记得我在去年国庆节前分享过一篇<技术干货:从零开始,教你设计一个百万级的消息推送系统>,虽然我在文中有贴一些伪代码,依然有些朋友希望能直接分享一些可以运行的源码.好吧 ...

  7. [BZOJ3550] [Sdoi2014]数数

    Description 我们称一个正整数N是幸运数,当且仅当它的十进制表示中不包含数字串集合S中任意一个元素作为其子串.例如当S=(22,333,0233)时,233是幸运数,2333.20233.3 ...

  8. spark上 spark-shell和java -jar访问hdfs路径问题

    部署spark集群 使用spark包 spark-1.0.2-bin-hadoop2.tgz 在spark-shell和java -jar访问hadoop hdfs上的文件写法是有区别的 在spark ...

  9. 如何把应用程序移植到k8s

    程序部署环境的容器化已经是大势所趋,微服务为容器化提供了广阔的应用舞台,k8s已经把Docker纳入为它的底层支撑容器引擎,一统江湖,成为了容器技术事实上的标准.一般的应用程序是不能直接拿来部署到容器 ...

  10. EFK教程 - EFK快速入门指南

    通过部署elasticsearch(三节点)+filebeat+kibana快速入门EFK,并搭建起可用的demo环境测试效果 作者:"发颠的小狼",欢迎转载与投稿 目录 ▪ 用途 ...