前端练习十二：一个简单的日历
摘要：说明：前面的练习来自于：https://github.com/hwaphon/WebProject
阅读全文
posted @ 2019-01-14 14:02
文章分类 - 前端练习
前端练习十：形状示例
摘要：1. 自适应的椭圆 在元素宽高相同的情况下，border-radius 的某个值设置为 =50% 或者 >50% 效果是相同的。如果元素是宽高不等的矩形，那么 =50% 和 >50% 的效果将有所不同。 border-radius: 10px 是 border-radius: 10px 10px 1
阅读全文
posted @ 2018-12-29 15:20
前端练习九：背景与边框示例
摘要：1.background-clip：用于规定背景的绘制区域。 background-clip的取值范围： border-box背景被裁剪到边框盒，默认值。 padding-box背景被裁剪到内边距框 content-box背景被裁剪到内容框 示例，注意比较三种属性值的不同效果；使用背景色或背景图片，
阅读全文
posted @ 2018-12-29 11:02
前端练习八：水平时间轴
摘要：水平时间轴(响应式+支持左滑右滑+支持左右方向键) horizontalTimeLine.html timeline.css timeline.js
阅读全文
posted @ 2018-12-29 10:47
前端练习六：3d翻页效果
摘要：1 2 3 4 5 上一页 ...
阅读全文
posted @ 2018-12-26 22:49
前端练习五：HTML5音乐播放器
摘要：html文件： css文件：main.css js文件：app.js 参考：https://github.com/hwaphon/HTML5MusicPlayer
阅读全文
posted @ 2018-12-26 22:37
练习三：javascript实现时钟
摘要：项目分析 1、首先时钟嘛，肯定要获取本地客户端的时间； 2、时钟有 3 个指针，我们可以通过添加动画的方式让它们围绕中心点转动； 3、通过获取到的 hour、minute 和 second 值分别计算 时针、分针和秒针的角度值； HTML&CSS 布局 <div class="box"> <arti
阅读全文
posted @ 2018-12-25 18:07
练习一：canvas画布标签的使用
摘要：HTML5 学习总结（四）——canvas绘图、WebGL、SVG 目录 一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画 二、WebGL 2.1、HTML5游戏开发 2.2.1、Coco
阅读全文
posted @ 2018-12-25 13:41
练习二：Canvas 滤镜示例
摘要：找张图片，保存为2.jpg，这里与代码文件在同目录下。
阅读全文
posted @ 2018-12-25 13:39
