随笔分类 -  html5 css3

css 绘图技巧
摘要：最近性能优化， 随着各种对js优化的技术升级（小程序，weex）。 最后影响首屏渲染交互的还是图片的加载问题。 特别是活动这样强调首屏交互的重点场景，css绘图的效果性能角度没有办法被替代，问题是成本是调试变更代价大。 练习下css 的绘图能力 1.普通径向渐变 旋转效果。 思路： 简单的径向渐变 阅读全文
posted @ 2020-10-16 13:44 break_happy 阅读(270) 评论(0) 推荐(0)
Flexbox 可视化属性
摘要：总结下flex 属性的用法 demo: 阅读全文
posted @ 2020-10-16 13:00 break_happy 阅读(108) 评论(0) 推荐(0)
html5 css3 loading 效果
摘要：canvas html5load1主要思路update 实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct... 阅读全文
posted @ 2015-01-22 13:19 break_happy 阅读(1110) 评论(0) 推荐(0)
web app 自适应方案总结 关键字 弹性布局之rem
摘要：关于rem，主要参考文档1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html)2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem现在移动端 web app 的自适应布局的方案有 5种... 阅读全文
posted @ 2015-01-18 15:07 break_happy 阅读(27340) 评论(3) 推荐(5)
canvas 拖拽实现
摘要：Canvas依赖分辨率不支持事件处理器 弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘SVG不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合... 阅读全文
posted @ 2014-12-10 16:42 break_happy 阅读(9096) 评论(3) 推荐(0)
canvas 实现 柱状图
摘要：define([],function(){ var myChart={ init:function(options){ this.ctx = options.ctx; this.data = options.data; ... 阅读全文
posted @ 2014-06-13 23:40 break_happy 阅读(2698) 评论(0) 推荐(0)
CSS3 Transform
摘要：transform 变形包括 rotate:旋转，scale:缩放, skew:扭曲， translate:移动， matrix:矩阵变形 五种属性 Transition 允许css属性在一时间段类过度 transition-timing-function: 过渡效果的速度曲线 transition 阅读全文
posted @ 2014-01-21 10:56 break_happy 阅读(119) 评论(0) 推荐(0)
css 透明
摘要：.bg_41 { background: rgba(71, 19, 3, 0.7); background: url( image/bg_tr.png)\9; _background:#0C0A09; } 阅读全文
posted @ 2013-03-12 09:50 break_happy 阅读(157) 评论(0) 推荐(0)
css 渐变按钮
摘要：.bg(@bg1:#578BC0; @bg2:#22447B){ border-radius: 8px; text-align: center; background: -webkit-gradient(linear, left top, left bottom, from(@bg1), to... 阅读全文
posted @ 2013-03-12 09:41 break_happy 阅读(482) 评论(0) 推荐(0)
less.js 使用
摘要：关于less.js 一直认为是个钻了牛角尖的东西，被迫在项目利用了一段时间发现我错了。所以总结下less文件demon#header { .red; .a_line; a{ color: #000000;} span { font-size: 14px; ... 阅读全文
posted @ 2012-12-08 12:47 break_happy 阅读(4087) 评论(0) 推荐(0)
localstorage2
摘要：将文本框的内容在关闭刷新页面前保存在本地，重新打开时回复保存的内容。可以用sessionStorage代替localStorage与session用户名绑定。 var Storage = (function () { var $this function storage() { this.ini.apply(this, arguments) } storage.prototype = { ini:function () { ... 阅读全文
posted @ 2012-06-13 11:42 break_happy 阅读(287) 评论(0) 推荐(0)
html5 web storage
摘要：html5本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。localStorage 同一domain是共享的（多个窗口共享一个“数据库”）验证是否支持localStorage：if(window.localStorage){ alert('This browser supports localStorage');}else{ alert('This browser does NOT support localStor 阅读全文
posted @ 2012-06-07 10:13 break_happy 阅读(289) 评论(0) 推荐(0)
解决 超链接点击边框的问题
摘要：a:focus { outline:0;}a{blr:expression(this.onFocus=this.close());} /* 只支持IE，过多使用效率低 */ a{blr:expression(this.onFocus=this.blur());} /* 只支持IE，过多使用效率低 *... 阅读全文
posted @ 2012-05-28 11:46 break_happy 阅读(287) 评论(0) 推荐(0)
CSS3 text-shadow
摘要：这是 Text Shadow 的实例效果! text-shadow: 0px 0px 5px #fff, 0px 0px 10px #fff, 0px 0px 15px #fff,0px 0px 20px #fff, 0px 0px 25px #fff, 0px 0px 60px #9dd;写成特效 阅读全文
posted @ 2012-05-02 09:31 break_happy 阅读(269) 评论(0) 推荐(0)
css3的在线演示站点
摘要：收集到CSS3的几个在线演示站点，效果非常好。1.http://www.css3maker.com/2.http://www.css88.com/tool/css3Preview/3.http://www.css88.com/tool/css3Preview/Linear-Gradients.htm... 阅读全文
posted @ 2012-03-10 14:23 break_happy 阅读(210) 评论(0) 推荐(0)
关于 ie6 float 塌陷
摘要：网上有很多关于浮动塌陷的文章。自己一般是用，父标签的overflo:hidden解决这一个问题的，后来遇上ie6的浏览器overflow：hidden不起作用了。对overflow使用hack也不管用。最后解决ie6下需对父标签定义款宽度（width：100%）的情况下在使用overflow:hid... 阅读全文
posted @ 2012-03-09 11:00 break_happy 阅读(271) 评论(0) 推荐(0)