svg
文章平均质量分 79
我的小英短
Q版前端开发攻城狮
展开
-
原生javascript制作svg进度球
在SVG发展到今天,已经在互联网上进行了各式各样的运用,当然也就包括进度条以及进度球的制作,制作这个类型的动画交互该如何制作呢?接下来就带大家来揭秘吧!1. 兴趣引导 > 最终效果 - SVG进度球:2. HTML(包含SVG)结构<!DOCTYPE html><html><head> <meta charset="utf-8"> &...原创 2018-03-14 01:09:56 · 1972 阅读 · 1 评论 -
svg学习笔记-<g>标签结合图形,图片,文字的使用
1. < g >标签 容器标签 分组标签-> 只能用于所有形状的特性属性 比如stroke,stroke-width等 cx,cy只能用于圆,所以不起作用-> 解决方法:用transform解决 transform='translate(200,200)' , 取代cx,cy移动到指定坐标< circle cx='200' cy='200' r='40' fill=...原创 2018-03-14 09:42:58 · 8666 阅读 · 1 评论 -
svg学习笔记之弹性小圆案例制作
目前的效果如下,比较简陋,而且截屏gif有漏帧,很生硬的动画效果,没有弹性的动作。里面有练习到svg的line,rect,text,circle标签,以及对应相关的属性。当然更多的还是js动态获取圆位置,生成图案这块,还是不错的一个小案例的。好的下面来看看一个大概的轮廓和思路:先来说说动态渲染svg图案:(1)createTag(tag,objAttr)的核心思想就是获取需要创建的标签,创建对应的...原创 2018-03-14 10:13:47 · 1258 阅读 · 0 评论 -
svg鼠标绘自定义折线
在进行svg绘制的过程中,经常需要在svg画布上绘制折线,而绘制折线的核心就是polyline标签,但如何用JS动态绘制鼠标点击拖拽绘制呢?实现的效果:实现的代码:<svg id='svg'></svg>class Svg{ constructor(){ this.svgNS = 'http://www.w3.org/2000/svg'; }...原创 2018-03-31 14:07:53 · 2783 阅读 · 0 评论 -
canvas 模拟真实水波浪动画
1. 核心工具:simplex-noise.min.js2. 工具介绍:(1)动态生成可改变可移动的噪波数据(2)文档地址: https://www.bootcdn.cn/simplex-noise/readme/ 3. 最终渲染演示: 4. Canvas核心过程演示: (1)单次绘制: draw(color,comp){ var amp = 25; //波浪幅度 可以通过函数传递参数更...原创 2018-07-09 20:32:15 · 7502 阅读 · 0 评论 -
八种响应式VUE动效遮罩转场动画开发
简介:使用前端技术,实现后台管理界面的可供预览视频转场特效,可以选择资源后再选择对应的特效组件进行转场预览,然后组合数据发向后端,在由后端推送到安卓端进行对应的视频转场切换。 使用技术:vue 、stylus、jquery、svg(核心)、 javascript 目前包括八种转场: 时钟、百叶窗、扇形打开、十字扩展、分割、覆盖、棋盘推进、溶解 核心技术栈:原生javascript、svg中...原创 2018-07-29 15:57:26 · 7141 阅读 · 0 评论 -
CSS3实现渐变文字的三种方案
在开发过程中,UI设计师经常会设计一些带渐变文字的设计图,给到我们程序员,而我们程序员们呢,大多都是默默地叹息传来,不过CSS3的诞生,解决了前端开发过程中的好多个难题,比如动画,遮罩等等1. 我们今天要实现的就是使用纯CSS实现渐变文字,下面是预览图片:2. 基础样式:.gradient-text{text-align: left;text-indent:30px;line-he...原创 2018-08-20 17:04:52 · 3467 阅读 · 0 评论