利用H5SVG实现线性动画效果

效果图

原理

主要应用到了SVG的两个属性分别为: stroke-dasharray和stroke-dashoffset.

stroke-dasharray

strokedasharray属性用于创建虚线：下面来看看例子

        path{stroke: #000;fill: transparent;stroke-width: 2px;stroke-dasharray: 10;}</style>
</head>
<body><svg width=500 height=500><path d="M 100 100 L 200 100"/></svg>

效果:

,当我们尝试增大stroke-dasharray时效果:

会发现放我们增大它的值时, 其中间的空白会变大吗,因此当我们把它设置成线长时并通过stroke-dashoffset就可以隐藏再通过CSS3就可以实现动画效果.

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style>*{margin: 0;padding: 0;}img{border:0;}ol, ul ,li{list-style: none;}path{stroke: #000;fill: transparent;stroke-width: 2px;stroke-dasharray: 10;
/*             stroke-dashoffset: 100;animation: dash 1s linear infinite alternate-reverse; */}@keyframes dash {to {stroke-dashoffset: 0;}}</style>
</head>
<body><svg width=500 height=500><path d="M 100 100 L 200 100"/></svg>
</body>
</html>

利用H5SVG实现线性动画效果相关推荐

我的Android进阶之旅------Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
Android利用温度传感器实现带动画效果的电子温度计
概述 Android利用温度传感器实现带动画效果的电子温度计. 详细一.准备工作需要准备一部带有温度传感器的安卓手机,或者使用有温度传感器的模拟器. 二.程序实现 1.需要截图程序结构 2.实现思 ...
利用Frame Animation实现动画效果，代码正确，就是达不到变换效果
就是因为把第一帧图片设置成了ImageView的src资源,从而一直覆盖在变换效果之上,去掉ImageView的src属性即可解决. 要想使应用已载入便播放动画效果,直接将 animationDraw ...
css波纹动画在移动端,利用css实现波纹动画效果实例
效果图如下实例代码如下 body{ background: #000; } .box{ width: 100%; height: 600px; background: #000; } .vr { d ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
在html中加动画效果,教你如何在网页上用H5实现动画效果
在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢? 其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时 ...
html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果. 一.首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用html将所需要的 ...
黑客内参小讲堂三步实现滚动条触动css动画效果
现在很多网站都有这种效果,我就整理了一下,分享出来.利用滚动条来实现动画效果, ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 d ...
教你如何在网页上用H5实现动画效果
在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢? 其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时 ...
IOS 利用麦克风声音来实现吹裙子的动画效果
前言:闲来无事帮别人写的,利用麦克风声音来实现吹裙子的动画效果,因为录下来的东西不需要播放,所以在停止录音的同时删除文件. 大致步骤: 1.首先需要在plist文件中添加Privacy - Micro ...

利用H5SVG实现线性动画效果

效果图

原理

stroke-dasharray

代码

利用H5SVG实现线性动画效果相关推荐

最新文章

热门文章