随笔分类 -  b) CSS&CSS3

摘要:做个备份吧,有时候加个新样式和小功能怕加蹦了找不回来了。 CSS: js+旁边侧栏代码: csdn博客:http://blog.csdn.net/major_zhang 我的Github 博客园上关注我 有的文章里面的图片失效,这是因为首发写在csdn的博客上,现在csdn增加了图片防盗链,失效的图 阅读全文
posted @ 2019-10-03 17:51 Lawliet__zmz 阅读(178) 评论(0) 推荐(0) 编辑
摘要:1、现代浏览器,比如chrome,firefox都支持硬件加速,GPU加速功能,开启后,使用相关CSS属性,3D API,canvas等,都会默认用GPU渲染的方式去绘制图像。 浏览器渲染的过程,网上图片杂且准确性出处都有待考究,关于这个过程和原理,国外有一个最权威的文档资料: "链接" (差不多网 阅读全文
posted @ 2019-09-01 19:27 Lawliet__zmz 阅读(608) 评论(0) 推荐(0) 编辑
摘要:需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染。 圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。首先中间栏width 100%后,左右栏被挤在第二 阅读全文
posted @ 2018-07-18 19:27 Lawliet__zmz 阅读(266) 评论(0) 推荐(0) 编辑
摘要:最近看了很多CSS相关的文章,相关浮动,BFC,垂直居中等一些问题,这里希望把学到的做一个归纳总结。 1. 常规流(文档流) 排版遵循从左到右,从上到下的规则,display为block的会自占一行,可以设置宽高度和外边距等,inline元素会排成一行,直到空间不能满足大小会换行,不能设置宽高,宽高 阅读全文
posted @ 2018-03-19 18:57 Lawliet__zmz 阅读(562) 评论(0) 推荐(0) 编辑
摘要:今天看了张鑫旭大佬的新书的有感吧,记录一下。 Web标准未对一些场景做出明确规范,所以各大浏览器厂家只能根据自己的理解和喜好去实现,表现差异不是浏览器的bug,用计算机领域的术语描述为"未定义行为"。 比如一个例子: CSS中的一个伪类,最常用的一个伪类:active,鼠标按下,执行改伪类对应的CS 阅读全文
posted @ 2018-03-04 18:46 Lawliet__zmz 阅读(211) 评论(0) 推荐(0) 编辑
摘要:以前学习Bootstrap时练手用的。分享给大家。 注意Bootstrap相关文件的路径,Bootstrap依赖jQuery,需要先加载jQuery Github代码链接: "链接" (如果有点小用,求个小star(。•ˇ‸ˇ•。)) index.html: css 阅读全文
posted @ 2018-02-16 17:30 Lawliet__zmz 阅读(1736) 评论(0) 推荐(0) 编辑
摘要:这个Bug是昨天晚上遇到,去SF社区提了出来,估计是太晚了,没人回答,今天早上两个回答。 第一个人回答主要是解决双重回调,也怪我,我刚开始也以为是双重回调的问题,因为最近看的网上资料全是Promise和async/await解决回调问题。我想我真不会遇到了?其实不是。 第二个大佬认真看了我贴的代码, 阅读全文
posted @ 2017-12-22 17:08 Lawliet__zmz 阅读(260) 评论(0) 推荐(0) 编辑
摘要:对象检测 向后兼容和浏览器嗅探技术 尽量减少访问DOM和尽量减少标记 平稳退化 JS和HTML的完全分离 共享onload事件的实现 键盘访问(注意死局的情况) DOM Core 和 HTML DOM 代码: <!DOCTYPE html Image Gallery Snapshots Choose 阅读全文
posted @ 2017-10-08 22:32 Lawliet__zmz 阅读(176) 评论(0) 推荐(0) 编辑
摘要:比较高级的万能选择器,比较常用 定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。 语法 doc 阅读全文
posted @ 2017-09-28 00:27 Lawliet__zmz 阅读(407) 评论(0) 推荐(0) 编辑
摘要:用到了HTML5,CSS3,JavaScript,jQuery...... 杜老师想让课堂变得有趣,想让学生帮他做个轮盘抽奖的,那么最近搞了下JS前端,就自告奋勇接下这个任务了。 难度主要是功能性的JS代码,比如轮盘的底层实现,弹出框3D旋转的特效。 做这个东西%50的时间都用在做图和一些其他素材的 阅读全文
posted @ 2017-09-18 20:16 Lawliet__zmz 阅读(458) 评论(0) 推荐(0) 编辑
摘要:嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式。 设计: 观察一张图片的变化,发现: 1、图片缩放(随机,并且不是同时运动) 1、从大到小 2、从小到大,透明度从1到0(在第一步运动完成后立马开始) 2、图片旋转(随机,并且不是同时运动的。需要在 阅读全文
posted @ 2017-09-06 17:22 Lawliet__zmz 阅读(982) 评论(0) 推荐(0) 编辑
摘要:主要是看了这位大佬的文章,http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/,有的很大的收获,在上一个制作3D变形案例中明白了一些原理。 首先一个立体坐标系: 按照 阅读全文
posted @ 2017-08-26 19:17 Lawliet__zmz 阅读(338) 评论(0) 推荐(0) 编辑
摘要:案例演示地址:http://codepen.io/airen/pen/eAztg 原案例来自慕课网的一个作业。 大致就是利用CSS3的新特性 3D transform的变换做一个特效。 1. 这一行代码感觉好高级额(⊙o⊙)…,首先定义的是径向渐变,菜鸟教程上的说明: farthest-side:指 阅读全文
posted @ 2017-08-26 18:31 Lawliet__zmz 阅读(287) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示