CSS3
文章平均质量分 58
一喵呜
这个作者很懒,什么都没留下…
展开
-
CSS3动画animation实现漂浮的云
实现的图像动画效果da原创 2014-04-09 22:56:41 · 10754 阅读 · 1 评论 -
Rem 字体设置学习
(2)JS方法动态计算根元素的字体大小: 【淘宝首页:m.taobao.com】(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recal原创 2015-06-20 18:26:49 · 2306 阅读 · 0 评论 -
移动端开发心得(2015.3.1更新)
移动端开发心得原创 2015-02-27 01:50:55 · 4603 阅读 · 2 评论 -
判断一个类名或者元素是否存在的思路
if ($('.ybvideo ul').length > 0){ // code...}原创 2015-06-20 17:46:18 · 1499 阅读 · 0 评论 -
戴尔一屏一屏 3D效果
http://dell.kedaibiao.cn/xps13-dino/special.html 戴尔一屏一屏 3D效果http://www.oschina.net/news/49651/best-jquery-360-degree-image-rotation-plugins 汽车360度旋转项目原创 2015-06-20 17:49:53 · 958 阅读 · 0 评论 -
CSS3发光字体几种效果
[CSS3] Neon Glow - CodePen /*setup*/*{ margin: 0; padding: 0;}@font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; src: local('Monoton'), local('Monoton-R原创 2015-06-20 17:51:12 · 16874 阅读 · 0 评论 -
背景渐变 兼容IE
CSS 实现元素背景渐变 .demo { width:100%; height:200px; border:solid 1px #213c7c; background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c)); background: -原创 2015-06-20 17:48:48 · 3190 阅读 · 0 评论 -
input只能输入文本框
原创 2015-06-20 17:58:12 · 818 阅读 · 0 评论 -
window.location的属性
window.location 对象所包含的属性 属性描述hash从井号 (#) 开始的 URL(锚)host主机名和当前 URL 的端口号hostname当前 URL 的主机名href完整的 URLpathname当前 URL 的路径部分port当前 URL 的端口号protocol当前 URL 的协议search从问号 (?) 开始的 URL(查询部分)window.location.hash转载 2015-06-20 18:09:24 · 2003 阅读 · 0 评论 -
判断是否微信 IPhone 打开
/*** 判断是否微信* @returns {boolean}*/function isWeiXin(){ var ua =window.navigator.userAgent.toLowerCase(); var s = ua.match(/MicroMessenger\/([\d.]+)?/i); if(s == null){ return fal原创 2015-06-20 18:18:38 · 2278 阅读 · 0 评论 -
SVG画圆形进度条
HTML5自由者 SVG画圆形进度条 #svgForStroke { position: absolute; top: 0; left: 0; width: 200px; height: 200px; stroke-d原创 2015-06-21 17:54:31 · 6935 阅读 · 0 评论 -
手机淘宝的flexible设计与实现
看到小黑的文章 关于webapp中的文字单位的一些捣腾 感觉很赞。尤其是,他提到了手机淘宝的meta,所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。对我们来说,最直观的感受就是,在超宽屏幕上,网页显示不会两边留白。以前pc时代大家经常讲的流体布局,其实就是转载 2015-07-14 14:49:34 · 1975 阅读 · 0 评论 -
离屏Canvas——制作放大镜效果
您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var offCanvas = document.getElementById("offCanvas")原创 2015-08-24 14:57:57 · 5232 阅读 · 0 评论 -
离屏Canvas——制作水印图片
您的浏览器尚不支持canvas 您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.ge原创 2015-08-24 15:01:05 · 3125 阅读 · 0 评论 -
Canvas——滑杆操控图片放大缩小
您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.getElementById("scale-range")原创 2015-08-24 15:08:30 · 5243 阅读 · 0 评论 -
纯CSS3实现滑动开关效果
实现效果如下:HTML结构代码: CSS代码:/*表单开关样式*/.ui-switch { position: absolute; font-size: .16rem; right:0.07rem; top: 50%;原创 2015-08-17 11:56:21 · 10575 阅读 · 4 评论 -
使用debug.js调试手机网页
创作背景手机网页兼容性与ie相比,有过之无不及,调试的时候,我们会使用console.log,但是手机上看不到打印出来的信息。所以只好各种alert,但alert总显得不那么优雅。初学js的时候就alert,现在还在各种alert。而且alert后还要点击确定,如果循环alert,那就悲剧了,一直点确定吧,可能手机还因此搞死机了。那么有没有一种显得更加优雅的方式去输出调试信原创 2015-06-20 18:17:08 · 3701 阅读 · 0 评论 -
多行文本超出 JS省略号...
(function($) { $(".first-button").on("click", function(event){ $(".first-text").ellipsis(200); $(this).hide(); });})(jQuery);(function($) { $.fn.ellips原创 2015-06-20 17:44:36 · 2750 阅读 · 0 评论 -
利用Apache配置本地 自定义域名
第一步:配置 httpd.conf 开启 虚拟主机 配置模块 去掉 " Include conf/extra/httpd-vhosts.conf " 前面的" # "# Virtual hosts Includeconf/extra/httpd-vhosts.conf 第二步:配置 httpd-vhosts.conf 开始 将自定义的本地域名原创 2015-06-20 14:20:19 · 4289 阅读 · 0 评论 -
HTMl5+CSS3 知识汇总【待更新整理...】
一、HTMl5的发展史1、HTML4.01 XHTML1.0 ----HTML5.0 谷歌苹果为首-并没有得到WC 的支持 W3C 当前推动HTML5.0的发展 新的网络标准2、跨平台 :桌端 手机端 系统:安卓-JAVA 、IOS-Object C 、 塞班、 WP 2011年HTM原创 2014-04-03 15:51:50 · 2837 阅读 · 0 评论 -
【htc法:IE-CSS3】CSS3支持IE6、IE7、IE8
【htc法:IE-CSS3】CSS3支持IE6、IE7、IE8摘要:IE-CSS3是提供一些CSS3标准新款式在即将到来的的Internet Explorer支持的脚本。IE-CSS3简介IE-CSS3是一种作用于IE浏览器的客户脚本,可以为一些CSS3支持度不好的低版本的IE浏览器(IE6、IE7和IE8)提供支持一些新的CSS3样式和标准。IE-CSS3的使用方转载 2014-05-16 11:31:36 · 3579 阅读 · 0 评论 -
项目复习期总结3:CSS引入方式,注释,命名规范,背景,行高,文本属性
目录:1、CSS注释的书写 怎么写?好处?2、CSS引入方式 各种的优缺点3、选择器的写法与选择器的优先级4、CSS命名规范5、背景,行高6、文本(text与font开头)等所有属性① CSS注释书写规范:1、单行注释: 直接写在属性值的后面,如:原创 2014-05-14 13:11:11 · 1676 阅读 · 0 评论 -
CSS3主要知识点复习总结+HTML5新增标签
分享2014-4-1 HTML5上课笔记2、CSS3属性(内核前缀)Mozilla 内核 css前缀-moz; WebKit 内核 css前缀-webkit ;(谷歌已换用blink内核)Opera 内核 css前缀 -o ; (欧朋已换用blink内核)Trident 内核 css前缀 -ms ;原创 2014-05-17 22:00:09 · 3604 阅读 · 2 评论 -
SASS用法指南
学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专转载 2014-09-03 12:05:27 · 880 阅读 · 0 评论 -
CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框(Facebox)
.wrap { width: 200px; height: 200px; border: 15px solid rgba(0,0,0,0.3); background: #FA0; margin: 0 auto; col转载 2015-06-20 18:03:27 · 1007 阅读 · 0 评论 -
webkit内核浏览器的CSS写法
-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canva转载 2015-06-20 18:39:09 · 1444 阅读 · 0 评论 -
元素水平垂直居中【弹性布局 || Translate】
/*** 游戏排行版*/.yblist { position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.9; z-index: 999;}/*弹性布局方法*/.flex { display:-webkit-box; d原创 2015-06-20 18:29:28 · 2103 阅读 · 0 评论 -
移动端手机横屏提示
【项目地址】: http://dwz.cn/RYgq7【手机二维码】:【效果】:【代码】 为了更好的体验,请使用竖屏浏览 /* 样式放在结尾,防止 base64 图片造成拥塞 */ @keyframes rotation { 10% { transform: rotate(90deg)原创 2015-06-21 17:40:42 · 7599 阅读 · 1 评论 -
Grunt学习
http://www.cnblogs.com/yexiaochai/p/3603389.htmlGruntfile这个文件尤其关键,他一般干两件事情: ① 读取package信息 ② 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面) Gruntfile一般由四个部分组成 ① 包装函数 这个包装函数没什么东西,意思就是我们所有的代码必须放到这个函数里面 module.ex原创 2015-06-20 18:42:00 · 874 阅读 · 0 评论 -
CSS3多行显示省略号...
不用js也能控制第让他控制第几行省略:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2015-06-20 17:42:52 · 6769 阅读 · 2 评论 -
图片生成database 64
<!DOCTYPE html 如何用HTML5的FileReader生成Data Url function buildDataUrl(source) { var file = source.files[0];原创 2015-06-20 17:52:33 · 3686 阅读 · 0 评论 -
Sublime的SVN插件
http://www.cnblogs.com/kingwell/p/3557579.html使用快捷方式:[alt+c] : commit current file.[alt+u] : update current file.[alt+r] : revert current file.找不到install 是sublime原创 2015-06-20 17:54:25 · 667 阅读 · 0 评论 -
CSS3 Loading效果
Loading .spinner > div { width:15px; height:15px; background-color: #5998CD; border-radius: 100%; display: inline-原创 2015-06-20 18:01:33 · 1085 阅读 · 0 评论 -
CSS3 display:flex和display:box有什么区别?
前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。后者是2009年的语法,已经过时,是需要加上对应前缀的。所以兼容性的代码,大致如下display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */display: -moz-box; /* Firefox 17- */display: -w转载 2015-06-20 18:31:16 · 2565 阅读 · 0 评论 -
啊哈:HTML5自由者博客搬家说明
原创 2015-09-09 17:32:57 · 1629 阅读 · 0 评论