H5和Css3
lucky芬
聚沙成塔,水滴石穿,努力到了自然会有期待的结果,做一个持之以恒的程序媛~(美丽与智慧并存,我的理想,嘻嘻)
展开
-
css3 鼠标滑过图片时文字旋转动画
特效描述:鼠标滑过图片的时候,以左上角为原点,顺时针旋转90度出现黑色遮罩层,之后文字一行行以右上角为原点旋转180度出现,纯css3实现,拷贝下面代码保存为html文件就可以查看效果。(所用到的图片可以用本地的图片代替) 炫酷C.box{ border: 1px solid #333; position: relative;原创 2016-12-17 16:02:01 · 4204 阅读 · 0 评论 -
html5 <canvas> 标签
定义和用法只是图形容器 ,可定义图形,比如图表和其他图像,须使用脚本来绘制图形。 标记和 SVG 以及 VML 之间的差异 标记和 SVG 以及 VML 之间的一个重要的不同是, 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是原创 2016-12-17 09:38:10 · 818 阅读 · 0 评论 -
基于canvas写一个字的效果
页面html: 学写一个字 <meta name="viewport" content=" height = device-height, width = device-width, initial-scale = 1.0,原创 2016-12-23 15:00:06 · 2173 阅读 · 0 评论 -
H5 直播避坑指南
https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw转载 2017-07-20 16:33:35 · 377 阅读 · 0 评论 -
HTML5 | Web Storage
Web Storsge - 本地客户端存储数据功能代替Cookies在客户端保存用户名等一些简单的用户信息Cookies缺点:大小限制在4KB带宽浪费难以操作————————————————————————————————————————————sessionStorage - 临时保存把数据存储在session对象之中,session就是打开网站到转载 2017-07-24 17:56:45 · 226 阅读 · 0 评论 -
自定义input默认placeholder样式
input::input-placeholder { color: #fb4747;} input::-webkit-input-placeholder { color: #fb4747;} input:-ms-input-placeholder { color: #fb4747;} input:-moz-placeholder { color:转载 2017-08-30 09:58:17 · 518 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略转载 2017-09-07 16:47:43 · 206 阅读 · 0 评论 -
关于less
1.在sublime安装less相关插件,ctrl+shift+p->install Package->less或者通过npm安装 npm install less -g(前提是电脑已经安装了node.js)2.下载koala.exe软件,将建好的.less文件拖入,右键->设置路径,保存为同名.css页面引用.css,编辑.less,.css会与之同步下面将一些less语法记录到原创 2017-09-05 18:51:45 · 354 阅读 · 0 评论 -
css模块化
对于css模块化不知大家是否有概念?下面且听我一一道来:其实,css规范里面就已经提到模块化相关内容了,就是@import语法。这个语法是被当前主流浏览器(当然包括ie6)原生支持的,属于Css基础最基础的部分。为啥大家很少用呢,大概是因为在生产环境单独去用@import,会有较为严重的性能问题,而且不同的浏览器以及不同的用法下也有不同的表现,比较让人郁闷。但是,这并不妨碍@import成为原创 2017-07-20 10:35:45 · 352 阅读 · 0 评论 -
CSS动画及特效
1.奥运五环 The Olympic Flag body { margin:20px; background-color:#efefef;} ul.flag { list-style-type:none;转载 2017-06-25 10:16:36 · 517 阅读 · 0 评论 -
复选框、单选框与文字对齐问题
看别人的博客对这个问题研究,想到之前也遇到过类似问题,但是没有深入细想,在此经过测试感觉下面方法比较好: Document input{ height:14px; vertical-align:top; } 你好 hello更多请看:http://www.zhangxinxu.com/wordpress/2009/08/复选框或单选框与原创 2017-02-08 15:39:11 · 7300 阅读 · 0 评论 -
【CSS3】transition过渡和animation动画
一、transitionCSS3的过渡功能可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多,所以才会更平滑。transition的属性属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就转载 2017-02-05 17:46:08 · 977 阅读 · 0 评论 -
css中英切换导航特效
特效描述 当鼠标移到导航的时候,由英文上滑为中文的。 Document *{padding:0; margin:0;} li{ list-style:none; } a{ text-decoration:none;} .nav{ width:100%; height:50p原创 2016-12-20 10:20:16 · 700 阅读 · 3 评论 -
css3 颜色渐变
线性渐变 - 从上到下:.grad1 { height: 100px; background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */原创 2016-12-17 16:18:49 · 637 阅读 · 0 评论 -
CSS3伪类和伪元素的特性和区别尤其是 ::after和::before
伪类和伪元素的理解 官方解释:伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。我自己的理解: 伪类,类,class是一个类,转载 2017-11-16 18:37:11 · 656 阅读 · 0 评论