随笔分类 - html5/css3
摘要：想要实现下面的效果，用flex搞不定，如果有其他方法，可以留言。 用float就比较简单了 div { width: 600px; height: 280px; background: #CCCCCC; } img { width: 100px; height: 70px; float: left;
阅读全文
摘要：一、background-size：设定背景图像的尺寸。 浏览器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+; 基本语法：background-size: length | percentage | cover | contain; 1：length
阅读全文
摘要：一、问题描述： 下载历史课堂板书原来是需要点图片一张张下载，比较麻烦；调整为把所有图片合并为pdf后下载。应用jsPDF插件，在移动端获取图片地址时，报跨域问题。 二、知识点补充： 1、jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。 1、安装：npm insta
阅读全文
摘要：1、line-height <div class="btn-text">上台</div> .btn-text{ display: inline-block; height: 18px; line-height: 18px; width: 25px; font-size: 10px; text-ali
阅读全文
摘要：1、el-table：是ElementUI 给我们封装了很好的表格处理方法，但对于大数据量渲染，e-table性能却表现很差，占用大量内存。 2、pl-table：可以解决性能问题。但目前pl-table已经停止更新了，取而代之是umy-ui。开发文档 umy-ui目前主要还是以表格为主，umy-u
阅读全文
摘要：原文地址，在原文的基础上编码测试截图，并增加了兼容性支持情况。 一、Word-wrap & Text-overflow 样式 兼容性：IE7+、Chrome支持。 1、word-wrap:break-word，设置或检索当当前行超过指定容器的边界时是否断开转行。 2、text-overflow 则设
阅读全文
摘要：什么是WebGL WebGL是在浏览器中实现三维效果的一套规范。 WebGL能做什么 游戏、家居、虚拟现实、城市地图、CAD制图等等 什么是Three.js three.js就是使用javascript 来写的，运行在浏览器上的3D程序。three.js是一个封装好的WebGL库，相当于简化了Web
阅读全文
摘要：一、图片分类 1、位图图片：最小单位由像素构成的图，缩放会失真。常用格式bmp，jpg，gif，png。 2、矢量图图片：矢量图纪录了元素形状及颜色的算法，以数学函数来实现。以svg格式为代表，可缩放矢量图形(scalable vector graphics)。其他格式cdr、ai、SWF、SVG、
阅读全文
摘要：使用方法： 1、打开阿里巴巴图标库http://www.iconfont.cn 2、选择想要的字体图标，加入购物车 3、打开购物车，点击下载代码 Unicode 引用 Unicode 是字体在网页端最原始的应用方式，特点是： 兼容性最好，支持 IE6+，及所有现代浏览器。 支持按字体的方式去动态调整
阅读全文
摘要：（1）天气网：http://www.tianqi.com/plugin/（2）中国天气网：https://cj.weather.com.cn/（3）天气API：http://www.tianqiapi.com/
阅读全文
摘要：<canvas> 标签是 HTML5 中的新标签。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 <canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。 <canvas id="canvas"> 您的浏览器不支持canvas </canvas> 兼容性
阅读全文
摘要：效果图： 知识点： 1、transform-origin 2、弧度计算公式 (2*Math.PI/360)*角度 3、表盘数字计算方法 x=r(1+Math.cos(弧度))； y=r(1+math.sin(弧度))； 完整代码： <!DOCTYPE html> <html> <head> <met
阅读全文
摘要：效果： 在线运行 http://oa.hopenchina.com:8086/project/newyear/index.html（建议用手机查看） 知识点： 1、box-sizing:border-box 2、:before 3、first-of-type 4、设置box背景渐变、阴影、边框 ba
阅读全文
摘要：效果图： 图片： 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星级评分</title> <style> *{ padding:0; margin: 0; } .rating{ width:140px; heigh
阅读全文
摘要：效果： 点击“在线运行”查看效果 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ padding: 0; margin: 0; } body,html{ height:100%; } .rightmenu{
阅读全文
摘要：（网络图片、如侵权必删除） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .fire{ width:166.7px; height:29
阅读全文
摘要：共同点 animation动画与transition过渡都可以实现动画效果，拥有下面共同的属性 animation:mymove 2s linear infinite alternate; transition: width 1s ease-out; 1、动画名称（name）@key-frame 2
阅读全文
摘要：效果图： 完整代码： 代码中图片（ img1.png：）
阅读全文
摘要：效果：初始化加载+定时刷新增加数值 相关代码： 容器： 引入js文件： 初始化对象运行： 下面是完整代码： 原文地址：https://github.com/GYFlash/gScrollNumber.js
阅读全文
摘要：实现效果： 图片轮播，实现图片整体切换效果 基本原理： 总共用10秒，0%到30% 3.333秒内显示第一张图片。30%到33%图片从0到-291px切换，花费0.333秒。以此类推。 图片3以后增加图片1的目的是让动画衔接自然。100%就是0%。 div是显示区域，ul是图片的移动区域。 代码：图
阅读全文
