2016年08月_晨夕_love

12月 11月 10月 09月 08月 07月

原创 canvas （smile）

今天我在学习html5新增加的标签——canvas 画布，他像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。 context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法

2016-08-29 16:16:47 473

原创 css3 animation(loading)

看见别人些的加载的动画，觉得特别炫酷，然后我也试着自己写咯一个，这个动画是用的纯html 和 css3写的。思路： 1、先定义一个大盒子，转需要用的元素 2、对需要做动画的标签进行定位操作 3、用css3实现你要的表情效果其他的废话就不多少咯，具体请看下面的代码，不明白的地方，随时都可以call 我html代码：

2016-08-24 15:37:39 1072

原创 transform-style ~ animation (css3星环运动)

transform--style属性指定嵌套元素是怎样在三维空间中呈现。值描述flat子元素将不保留其 3D 位置。preserve-3d子元素将保留其 3D 位置。然后我就自己用这个属性写咯一个比较炫的星环动画。html代码：

2016-08-19 11:20:19 798

转载 JS正则表达式总结

正则需要传参时,必须使用new RegExp();var re = new RegExp('\\b'+sClass+'\\b');-------------------------------------------------------------量词,转义字符:\s : 空格\S : 非空格\d : 数字\D : 非数字\w : 字符(字母

2016-08-17 15:02:48 455

转载 jQuery自己编写插件()

引言：　　在项目中不同页面经常要用到已经写好的交互，比如弹窗，比如下拉菜单，比如选项卡，比如删除...此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情，而且个人认为有些low了，我们可是要追寻高大上的90后有为青年呢~可是该如何高大上呢？这时jQuery自定义插件开发来了，第一次听到插件开发觉得如此happy，遂动手网上查找资料进行学习，如下，我用自己的语言

2016-08-16 16:19:19 9209 2

转载 10个超棒jQuery表单操作代码片段

jQuery绝对是一个伟大的开源javascript类库，是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript，在今天这篇代码片段分享文章中，这里收集了10个超棒超实用的jQuery表单处理代码，希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题，希望大家喜欢！如果你也有相关的代码，请大家积极分享！代码片段1: 在表单中

2016-08-09 14:39:52 378

转载微信网页添加分享到朋友圈、发送好友JS代码

微信公众平台开始支持前端网页，大家可能看到很多网页上都有分享到朋友圈，关注微信等按钮，点击它们都会弹出一个窗口让你分享和关注，这个是怎么实现的呢？今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈，关注微信号等按钮。微信内嵌浏览器通过 Mac 远程调试 iPhone 上微信自己的网页，我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象：WeixinJ

2016-08-09 14:04:53 3541

原创鼠标移动3D翻转动画特效

好久没有更新文章咯，今天我为大家带来一个酷炫的3D翻转特效效果例子（该效果是用的纯html+css3实现的哦）特别指示：1、用到咯;perspectivea) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。2、transform-style

2016-08-04 14:21:52 2689 4

动态时钟 body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;} .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative;} /*原点*/ .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;} /* 指针 */ .clock_line{ position: absolute;position:absolute;z-index:20;} .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px; transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;} .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000; transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width: inherit; height: inherit;} /*时钟数*/ .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;} .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7; position:absolute;top:199px;left:200px;} .scale-show{ width:12px;height:2px;background-color:#555;float:left;} .scale-hidden{width:183px;height:2px;float:left;} /*日期*/ .date_info{width:160px;height:28px; line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555; font-weight:bold;} .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; } .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;} #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;} <div class

2016-07-13

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

chenxi1025的博客