css
ChauncyTang
纯笔友!
展开
-
rotate点击来回旋转和同一事件绑定解决同一class写法
最近写了个刷新ico,发现用css3的rotate单纯加上样式transform: rotate(360deg);,每次点击它会来回旋转,而不是一个方向的旋转。在这就用了个新的css样式解决,需要兼容就自己加。.ico.active{ animation-name: rotate; animation-duration: .5s; animat原创 2016-07-07 18:59:26 · 922 阅读 · 0 评论 -
人生苦短,我用正则
不得不感叹正则的强大之处!在线Xmind,记录的一点正则脑图这次记录一个小例子,var str2 =`<tbody> <tr> <td><p><a id="sogou_99999_1">广州水电费</a原创 2018-06-28 16:32:16 · 180 阅读 · 0 评论 -
前端rsa加密和PHP解密
前端代码<html><head> <title>JSEncrypt</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript&q原创 2018-07-01 14:39:33 · 918 阅读 · 1 评论 -
获取浏览器和屏幕各种高度宽度
原生JSdocument.body.clientWidth; //网页可见区域宽(body)document.body.clientHeight; //网页可见区域高(body)document.body.offsetWidth; //网页可见区域宽(body),包括border、margin等document.body.offsetHeigh...转载 2018-06-10 18:08:52 · 49181 阅读 · 0 评论 -
原生JS节点获取、Class增删改查、属性操作、Dom操作
HTML内容<div id="head"> <div class="head_wrapper">1</div> <div class="headBlock">2</div></div>原生JS获取节点 在这里推荐使用element元素的方法 因为节点得原创 2018-06-15 22:09:45 · 11601 阅读 · 0 评论 -
web图片预加载的几种方式
类似H5和一些动画元素都需要提前加载完一些图片 如果图片在使用之前就已经请求过了, 那么再次使用的时候,就不会再去请求(ps:图片路径一样)。1.使用纯的css进行图片预加载body:after { content: ""; display: block; position: absolute; background: ur...原创 2018-06-13 18:59:22 · 3992 阅读 · 0 评论 -
display: flex; 布局
一、Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。.box1{ display: flex; } .box2{ display: inline-flex; &amp;amp;amp;lt;span &amp;amp;amp;gt;行内元素也可以使用Flex布局。&amp;amp;amp;lt;/span&a转载 2018-05-24 17:02:40 · 238 阅读 · 0 评论 -
css3 transform transition css3 前缀
transform 参数div{ transform:rotate(7deg) translate(10px,10px) scale(2); -ms-transform:rotate(7deg) translate(10px,10px) scale(2); /* IE 9 */ -moz-transform:rotate(7deg) translate(10px,1...原创 2018-06-02 20:30:45 · 1449 阅读 · 0 评论 -
移动端真机调试神器
在微信开发者工具没问题在手机QQ浏览器没问题在手机UC浏览器没问题唯独在微信的内嵌网页一直加载不出来总算找到了一款非常好的开发者调试插件,最终测试代码o(=•ェ•=)m冒问题~~vConsole github地址:https://github.com/Tencent/vConsole/blob/dev/README_CN.md使用方法很简单:import VConso...原创 2018-05-25 16:04:16 · 492 阅读 · 0 评论 -
HTML,CSS优化整理清除
HTML,Hbuilder 代码一键整理就整齐了。 在这推荐谷歌插件code cola 还是国人开发的。 具体怎么用,自行摸索了。 相当的人工智能。CSS,之前用的是谷歌插件remove Css 对于小项目还是挺好的这里推荐uncss 在线网址 https://uncss-online.com神器了,反正十万行N个页面的CSS硬是给删除到几千行原创 2018-01-04 18:55:27 · 700 阅读 · 0 评论 -
纯css做的页面加载之后div回弹动画
只写了谷歌的样式,页面一打开,div会延迟加载个小回弹动画。以前都是用的js写,这次用了css3,感觉挺好的。以下是简化版demodiv{transition: all 5s; -ms-transition: all 1s; /* Safari 和 Chrome */ -webkit-transition: all 1s; /* Safari 和 Chr原创 2017-10-11 16:33:45 · 4878 阅读 · 2 评论 -
伪类三角形
空心三角形html:<spanclass="square">/span>css :.square:after { content:'';display: inline-block; width:8px;height:8px;border-top:1px solid#656565;border-right:1转载 2017-10-01 10:38:03 · 254 阅读 · 0 评论 -
React v-dom的理解
结构流程state数据jsx模板先生成虚拟dom (就是一个JS对象)数据和模板结合,生成真实的dom显示state数据发生改变数据和模板生成新的虚拟dom (提升性能)比较原始的虚拟dom和新的虚拟dom的区别,某个div部分内容 (极大提升性能) diff算法,同层比对数据直接操作dom,改变内容优点:提升性能,以前是dom比对, 现在是虚拟dom比对(JS对...原创 2018-08-08 21:53:15 · 218 阅读 · 0 评论