![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
动画
文章平均质量分 92
liugang0605
前端架构,可观测工程译者,信通院可观测性专家,北航工程管理硕士毕业,专八,专注于系统性能和稳定性建设。
展开
-
popup(2)
jquery简化dom操作原创 2017-07-09 18:14:41 · 184 阅读 · 0 评论 -
loading-css
效果如下: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>定时器的进度条</title> <style> .loading { width: 100%; height: 100%; positi原创 2017-10-19 17:40:36 · 194 阅读 · 0 评论 -
贝塞尔曲线
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>commu</title> <style> canvas { background: #aaa; } </style></head><body><canvas id="原创 2017-09-01 10:51:29 · 181 阅读 · 0 评论 -
初识createJS
CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 这里我引用cdn上的链接;<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https:/原创 2017-09-25 10:54:10 · 517 阅读 · 0 评论 -
图片匀速淡入淡出效果(纯js)
图片匀速淡入淡出效果如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } div {原创 2017-08-22 07:23:39 · 699 阅读 · 0 评论 -
分享到动画弹出框
以下是简单的一个小动画; 效果如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 200px;原创 2017-08-21 21:57:01 · 285 阅读 · 0 评论 -
数据展示-条形图-canvas
假设后台要求实现一个条形图,而且还是动态生成,(此处暂时不考虑用户输入数值,仅考虑数据从后台生成); 大概效果如图: 比如在500*500的框内生成;以下是基本布局,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>trialgame</title> <style>原创 2017-08-07 08:58:43 · 969 阅读 · 0 评论 -
popup-canvas
之前就说要写的,今天补出来; 先看效果: 基本代码: 要实现<!doctype html><html><head> <style> canvas { background: yellow } </style> <meta charset="utf-8"></head><body onload="draw原创 2017-08-05 16:39:48 · 614 阅读 · 1 评论 -
动态生成条形图-canvas
按照上篇我稍微改动了一些: 给每个矩形增加了一个颜色的属性var rec = function (x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; this.color=this.h > 300 ? "red" : this.h > 200 ?原创 2017-08-07 16:08:26 · 1672 阅读 · 0 评论 -
clock-canvas
先列出效果图吧; 基本布局:html>head lang="en"> meta charset="UTF-8"> title>title> style> div { text-align: center; margin-top: 250px; } style>he原创 2017-10-23 15:43:55 · 269 阅读 · 0 评论