轻量级HTML5插件使用jQuery绘制SVG图形轮廓线路径动画教程

轻量级HTML5插件使用jQuery绘制SVG图形轮廓线路径动画教程,第1张

看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级HTML5插件jquery-drawsvg就可以实现了,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。

该SVG路径动画插件的特点有:

轻量级,压缩后小于2kb

使用简单

支持Easing过渡动画效果

演示地址:http://www.htmleaf.com/Demo/201509112558.html

插件下载地址:http://down.htmleaf.com/1509/201509111546.zip

使用方法:

使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。

<script src="js/jquery.min.js"></script>

<script src="js/jquery.drawsvg.js"></script>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。

首先将初始化的对象实例保存为一个变量:

var mySVG = $('#my_svg_element').drawsvg()

然后就可以执行动画效果了:

mySVG.drawsvg('animate')

配置参数

下面是该SVG路径动画创建的可用配置参数:

参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery

Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()

{}路径动画完成之后的回调函数

热门频道

首页

博客

研修院

VIP

APP

问答

下载

社区

推荐频道

活动

招聘

专题

打开CSDN APP

Copyright © 1999-2020, CSDN.NET, All Rights Reserved

打开APP

html怎么做出相框的效果,使用html5 svg和css3制作边框运动的动画效果 转载

2021-06-03 01:54:06

回头看看我

码龄3年

关注

本教程将和大家一起来研究一种奇妙且有趣的边框运动效果。当你用鼠标划过类似图片的内容块时,它的边框将会很神奇的运动起来:内容块的透明度降低,它的四条边框按顺时针方向运动,效果十分奇妙。我们将使用html5 svg和CSS transitions来完成它。

开始之前先来思考一下,然后在去完成效果。

注意:不是所有的浏览器都支持在svg中使用CSS transitions。

我们刚接触这种效果时,并不知道该如何下手制作,但是你可以先观察一条边,比如上部的边,你会注意到,边框是从右到做减少,然后一条新的边再从右边出现运动到左边。当结合4条边来看时,效果是上部的边运动到左边,左边的边运动到下边,下边的边运动到右边,右边的边运动到上部,正好是一周。

你也许能在不使用svg的情况下制作这种效果,甚至不使用额外的元素,只使用伪元素。但是本教程里我们希望研究如何通过svg来制作,并且通过css而不是javascript来控制它。

现在,想一想如何通过svg来实现它。我们想不使用javascript来实现它,但是使用css来计算stroke-dashoffset和stroke-dasharray的值是相当困难的。所以我们决定使用另一种解决方案,使用线条并它们运动起来。

我们使用的线条有三个部分组成。线条的长度是方框的边长的三倍。线条的中间有一个和方框宽度相同的间隙,我们将通过设置stroke-dashoffset的值等于方框的宽度来实现效果。现在,诀窍在于过渡线的位置:

83ac5741bf84fd2e8ad8c431382228f2.gif

svg的大小设置为方框的大小,所以我们不会看到超出虚线溢出的部分。

我们使用一个div来放置svg

div的宽度和高度设置为和svg一样的200px,并且设置svg为绝对定位。这里重点要注意将线条的描边设置为10,并设置stroke-dasharray属性为200。

div {

width: 200px

height: 200px

position: relative

overflow: hidden

background: #ddd

}

svg {

position: absolute

top: 0

left: 0

}

svg line {

stroke-width: 10

stroke: #000

fill: none

stroke-dasharray: 200

-webkit-transition: -webkit-transform .6s ease-out

transition: transform .6s ease-out

}

div:hover svg line {

-webkit-transform: translateX(-400px)

transform: translateX(-400px)

}

当我们用鼠标hoverdiv的时候,线条也要有一些transition效果。我们希望线移动其自身长度三分之二左右,所以在x轴上设置translate为-400px,由于我们在这里不能够设置translation的值为百分比,所以只能使用像素做单位。

下面我们来添加另外几条线,为了便于理解他们的位置和运动方向,来看下面的图片演示。

7dcd8f66daf46340c97cc8f07d387691.gif

我们希望线条这样运动,当线条的开始部分移出方框时,和他相垂直的线的后面部分开始进入方框,这样就会制造出一种四条线沿着边框运动的视觉差效果。

让我们来看一看线条运动的坐标系。

8092340435f246cda776b9e427364185.png

左边的线条的坐标为(0,200)和(0,-400),下边的线条为(200,200)和(-400,200),右边的线条为(200,0)和(200,600):

当鼠标hover的时候,需要为每条线设置不同的translation

div:hover svg line.top {

-webkit-transform: translateX(-400px)

transform: translateX(-400px)

}

div:hover svg line.bottom {

-webkit-transform: translateX(400px)

transform: translateX(400px)

}

div:hover svg line.left {

-webkit-transform: translateY(400px)

transform: translateY(400px)

}

div:hover svg line.right {

-webkit-transform: translateY(-400px)

transform: translateY(-400px)

}

现在我们做出了一个基本的效果,让我们来做得更加漂亮一点!

我们可以再方框盒中添加一些文本

D

2012

Broccoli, Asparagus, Curry

再为方框添加一些颜色渐变,各条svg边框间使用box shadow来制作一些间隔。

.box {

width: 300px

height: 460px

position: relative

background: rgba(255,255,255,1)

display: inline-block

margin: 0 10px

cursor: pointer

color: #2c3e50

box-shadow: inset 0 0 0 3px #2c3e50

-webkit-transition: background 0.4s 0.5s

transition: background 0.4s 0.5s

}

.box:hover {

background: rgba(255,255,255,0)

-webkit-transition-delay: 0s

transition-delay: 0s

}

为文本添加一些样式

.box h3 {

font-family: "Ruthie", cursive

font-size: 180px

line-height: 370px

margin: 0

font-weight: 400

width: 100%

}

.box span {

display: block

font-weight: 400

text-transform: uppercase

letter-spacing: 1px

font-size: 13px

padding: 5px

}

.box h3,

.box span {

-webkit-transition: color 0.4s 0.5s

transition: color 0.4s 0.5s

}

.box:hover h3,

.box:hover span {

color: #fff

-webkit-transition-delay: 0s

transition-delay: 0s

}

给svg和线条添加样式

.box svg {

position: absolute

top: 0

left: 0

}

.box svg line {

stroke-width: 3

stroke: #ecf0f1

fill: none

-webkit-transition: all .8s ease-in-out

transition: all .8s ease-in-out

}

因为方框的背景色在做渐变,所以我们要为线条的transition设置一些延时,否则看不到效果。

.box:hover svg line {

-webkit-transition-delay: 0.1s

transition-delay: 0.1s

}

前面我们设置的stroke-dasharray只有一个值,现在我们需要所有的线条和间隔都有不同的值。

.box svg line.top,

.box svg line.bottom {

stroke-dasharray: 330 240

}

.box svg line.left,

.box svg line.right {

stroke-dasharray: 490 400

}

最后,我们设置当鼠标划过时不同的转换值。由于我们的方框是300px宽度,水平线将需要的总宽度的三分之二作为过渡。垂直方向的线也是相同的原理。

.box:hover svg line.top {

-webkit-transform: translateX(-600px)

transform: translateX(-600px)

}

.box:hover svg line.bottom {

-webkit-transform: translateX(600px)

transform: translateX(600px)

}

.box:hover svg line.left {

-webkit-transform: translateY(920px)

transform: translateY(920px)

}

.box:hover svg line.right {

-webkit-transform: translateY(-920px)

transform: translateY(-920px)

}

教程就到这里,希望对你有所帮助!

相关资源:26、Jqueryhtml5悬浮圆圈背景动画特效-Javascript代码类资源-CSDN...

打开CSDN APP,看更多技术内容

html5边框为直线,html5 svg线条动态绘制文字轮廓边框动画_电商Z先生的...

这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIAL ICONS。 制作流程 先用一张gif图片来...

继续访问

html5边框闪烁,HTML – CSS框阴影动画像素艺术闪烁_窦泽南的博客-CSDN...

动画似乎确实在起作用,但是对动画有一种强烈的“闪烁”效果.见下文: 我已经尝试了Chrome中“闪烁转换”的常用解决方案 – 例如将-webkit-backface-visibility设置为隐藏 – 但到目前为止还没有解决问题. 正如我所说的,我担心我只是对技...

继续访问

纯CSS3炫酷元素边框线条动画特效

纯CSS3炫酷元素边框线条动画特效 ,自 动 循 环运动。

HTML特效推荐,超级惊艳 10款HTML5动画特效推荐[转]

ylbtech_html5_democss今天咱们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,如今将它们分享给你们,也许你能用到这些 HTML5 动画和 jQuery 应用。html一、HTML5 Canvas 发光 Loading 动画html5以前咱们分享过不少基于 CSS3 的 Loa...

继续访问

css3边框交替动画_一步步教你用HTML5 SVG实现动画效果_陈二二的博客...

SVG是一种基于XML的,用于定义缩放矢量图形的标记语言。 它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。 此外你还可以通过在这些路径上添加动态属性(例如笔触,颜色,粗细,填充等)来生成动画。 从2017年4月起,CSS Level 3...

继续访问

边框效果_@呵呵的博客

边框效果 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title...

继续访问

超酷震撼 HTML5/CSS3动画应用及源码

HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错。 1、纯CSS3创意Loading加载动画 今天要来分享一款非常具有创意的CSS3 Loading动画效果,整个Loading动画就像一部开足马力的发动机,在不停地循环工作,看上去Loading动画样式十分新颖。...

继续访问

HTML5实现动画三种方式

编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现。 PS:由于显卡、录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真! 分三种方式实现: (1)canvas元素结合JS (2)纯粹的CSS3动画(暂不被所有主流浏览器支持,...

继续访问

HTML5 SVG图形轮廓线条绘制动画插件-vivus_delmarks的博客

通过该svg路径动画插件,你可以使用同步或异步的方式来执行SVG图像路径的动画。Vivus提供各种不同的动画参数来让你定制你自己的SVG路径动画。类似的动画效果还有:html5 svg线条动态绘制文字轮廓边框动画 和 html5 svg线条动态绘制iphone边框...

继续访问

很有点意思的特效,本人很喜欢_会做饭的技术男的博客

纯css3悬停文字线条边框动画特效点击》 纯css3悬停文字线条边框动画特效 css3线条动画,文字边框动画 橙色的在线小说阅读手机网页模板 https://www.mk2048.com/demo/demo_target_desc_hcbjibkaib.html jquery.mobile框架写的手机小说...

继续访问

css3动态边框

<ul class="partnersLogo"><li><a href="http://www.chinapnr.com/" target="_blank"><div class="border_top"></div><div class="border_right...

继续访问

热门推荐 20款让人惊叹的html5动画效果

html5技术越来越受人们关注,这里给大家带来

继续访问

26、Jqueryhtml5悬浮圆圈背景动画特效-Javascript代码类资源-CSDN...

鼠标悬停div边框动画 jquery鼠标悬停div边框动画 6个动画类型 html5悬浮圆圈背景动画特效特效代码 html5悬浮圆圈背景动画特效是一款动态圆圈飘动html5特效代码。 HTML5圆点悬浮背景特效 HTML5圆点悬浮背景特效是一款TweenMax基于canvas绘制透...

继续访问

HTML5SVG闪烁的霓虹灯特效特效代码_svg闪烁-其它代码类资源-CSDN...

炫酷HTML5 SVG+CSS3霓虹灯文字边框动画特效 直接复制可用 炫酷HTML5 SVG+CSS3霓虹灯文字边框动画特效 直接复制可用 HTML5 SVG Loading 动画加载特效.rar 收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ,一共是4个网页加载特...

继续访问

html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能

实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。相框需要自己配置,设置为背景,在CSS中设置。效果如图:html部分:H5拖放API之图片相框效果>请将图片拖放至此处CSS部分:* {margin: 0pxpadding: 0px}.box2 hr {border: 3px solid blueviolet}.box {width: 240pxheight: 150pxbo...

继续访问

html怎么做出相框的效果,PS滤镜制作漂亮的实木相框效果

一、新建一个600 * 800像素的文件,然后新建一个图层,前景颜色设置为红色,背景设置为深红色,执行:滤镜 >渲染 >纤维,参数设置如下图。二、执行:图像 >旋转画布 >逆时针90度,选择举行选框工具在画布上选区一个长条形,执行:滤镜 >扭曲 >旋转扭曲。三、扭曲后的效果,主要是增强木质感。四、新建一个图层,做一个比画布稍小的选区,拉上金属渐变色,...

继续访问

html把图片做正方形背景图片,前端通过background实现图片裁剪显示的方法

前端图片展示在前端处理图片是非常常见的,而图片展示又存在一个最大的问题:适应,可以看看这种情况:固定空间作一新求抖直微圈展示图片空间是 100px100px,图片是 6060空间是空间是 100px100px,图片是 160px240px空间是空间是 100px100px,图片是 240px160px就哈础是发通待质击文以为近哈知按分过续的战图片展示而言,按宽高比进行缩放是最好的结果,宽高1:1的...

继续访问

html5+css设置图像/形状的透明度/图片边框设置/设置网页元素的阴影效果/设置图形的渐变效果/径向渐变与线性渐变/学习笔记

一、CSS设置颜色与透明度 1.颜色透明度的设置,可以通过引入RGBA模式和opacity属性对背景与图片设置不透明度 1,RGBA模式 rgba(r,g,b,alpha)div{ width: 300pxheight: 300pxbackground: rgb(242,35,36) url("user.jpg") no-repeatrgba(242,35,36,0.7) /*设置颜色透明度为0.7*/ } 2,opacity模式 opacity:0

继续访问

html5使用图像-图像裁剪

图像裁剪 function draw(id){ var c=document.getElementById('canvas')if(c==null) return falsevar cxt=c.getContext("2d")cxt.fillStyle="aqua"cxt.fillRect(0,0,600,600)var img=new Im

继续访问

html svg 线条动画,HTML5 SVG图形轮廓线条绘制动画插件-vivus

Vivus是一款可以执行SVG路径动画的轻量级Javascript库。Vivus可以绘制SVG图形的外观。Vivus提供各种不同的动画参数来让你定制你自己的SVG路径动画。类似的动画效果还有:html5 svg线条动态绘制文字轮廓边框动画 和 html5 svg线条动态绘制iphone边框动画效果。插件安装可以通过Bower或jsDelivr来安装该SVG路径动画插件。bower install ...

继续访问

HTML5设置字体轮廓,HTML5: 利用SVG动画动态绘制文字轮廓边框线条

这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIAL ICONS。制作流程先用一张gif图片来看看效果:HTML5: 利用SVG线条动态绘制文字轮廓边框动画制作SVG1、首先你要下载和安装一款矢量图形编辑器,推荐使用Inkscape。2、...

继续访问

如何实现HTML5动画页面?

HTML5实现动画页面的两种方式

继续访问

html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...

简要教程这是一款HTML5 SVG炫酷checkbox复选框动画特效。该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷。使用方法在页面中引入fency-checkbox.css文件。HTML结构一个SVG checkbox复选框的基本HTML结构如下:width="50px"height="50px"viewBox="0...

继续访问

html边框流动效果,采用css实现流动的边框

问题起缘一个曾经做过的项目, 类似excel那样, 选中单元格并复制或粘贴时有个边框流动的效果, like this:在前端要作出这种效果可能方法并不少, 不过我只想到了2种, 真边框与假边框, 真边框的意思就是说切实的通过css里的border来实现, 另一种就是找替代边框。实现效果如下:图1为假边框, 图二为真边框1. 先说说假边框? 对, 因为这个在我看来更容易实现, 思路也更清晰。假设要创...

继续访问

移动端金字塔H5丝版的全屏滑动边框

如丝般高性能全屏动画滑屏组件, 主要应用于微信H5宣传页,海报,推广介绍等场景. 基于iSlider,可以快速搭建效果炫丽的H5滑屏页面.

继续访问

使用 | HTML &CSS | 制作精美相框

文章目录使用dw编写精美相框1,制作魔法动态相册(1)html源码(2)css源码(3)运行效果2,神奇创意相框(1)HTML源码(2)运行结果3,普通相框(1)HTML源码(2)运行结果4,形状相框(1)HTML源码(2)运行结果 使用dw编写精美相框 1,制作魔法动态相册 (1)html源码 <!DOCTYPE html><html><head><meta charset="utf-8" /><title>相册</title&g

继续访问

html怎么做出相框的效果,纯CSS实现的相框效果

CSS语言:CSSSCSS确定body {background: whitesmokedisplay: -webkit-boxdisplay: -ms-flexboxdisplay: flexheight: 100vh-webkit-box-align: center-ms-flex-align: centeralign-items: center-webkit-box-pack:...

继续访问

最新发布 HTML+CSS实现动态效果相册

纯HTML+CSS实现的动画效果

继续访问

html5 边框动画

html怎么做出相框的效果

写评论

评论

1

点赞

分享


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7235953.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存