随笔分类 -  html,css,javascript

摘要:一直以来,使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。 当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果。 使用 SVG 阅读全文
posted @ 2017-07-18 11:02 ChokCoco 阅读(102098) 评论(49) 推荐(137) 编辑
摘要:感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并 阅读全文
posted @ 2017-06-26 11:12 ChokCoco 阅读(18942) 评论(27) 推荐(77) 编辑
摘要:CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outside shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,也就是使用 CSS 阅读全文
posted @ 2017-06-12 13:07 ChokCoco 阅读(20110) 评论(33) 推荐(95) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2017-05-09 11:21 ChokCoco 阅读(15006) 评论(10) 推荐(26) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2017-05-03 16:44 ChokCoco 阅读(6731) 评论(12) 推荐(35) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2017-04-19 13:32 ChokCoco 阅读(38576) 评论(2) 推荐(15) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2017-03-30 10:48 ChokCoco 阅读(4881) 评论(8) 推荐(25) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2017-03-23 09:42 ChokCoco 阅读(7181) 评论(10) 推荐(38) 编辑
摘要:最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: 对于一个好奇的切图仔来说,忍不住动手尝试了一下,看到题目首先想到的是会用到高阶函数以及 Array.prototype.reduce()。 高阶函数(Higher-order function):高阶函数的意思是它接收另一个函数 阅读全文
posted @ 2017-03-06 11:32 ChokCoco 阅读(12369) 评论(39) 推荐(50) 编辑
摘要:什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷。在 CSS 层面亦不例外。 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验性功能未成为标准却被大量使用; 需要兼容多终端,多浏览器,而各浏览器对某一新功能的实现表现的天差地别 阅读全文
posted @ 2017-02-28 13:08 ChokCoco 阅读(4598) 评论(13) 推荐(26) 编辑
摘要:如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? 额,其实,我们还可以有这 3 个取值: 没了吗?偶然发现其实还有一个处于实验性的取值,position:sticky(戳我查看MDN解释): 卧槽,什么来的? 前端发展太快,新东西目接不暇,但是对于有趣的 阅读全文
posted @ 2017-02-15 18:41 ChokCoco 阅读(168149) 评论(26) 推荐(61) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2017-01-05 17:32 ChokCoco 阅读(8368) 评论(7) 推荐(15) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2017-01-04 16:48 ChokCoco 阅读(7507) 评论(7) 推荐(25) 编辑
摘要:这是一个令人激动的革新。 CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量。 一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 阅读全文
posted @ 2016-11-16 10:51 ChokCoco 阅读(11646) 评论(7) 推荐(22) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2016-11-15 21:06 ChokCoco 阅读(5085) 评论(1) 推荐(6) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2016-11-03 13:39 ChokCoco 阅读(8228) 评论(12) 推荐(25) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2016-10-13 13:11 ChokCoco 阅读(13515) 评论(5) 推荐(24) 编辑
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍 阅读全文
posted @ 2016-10-11 10:46 ChokCoco 阅读(6356) 评论(21) 推荐(17) 编辑
摘要:开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 谈谈一 阅读全文
posted @ 2016-09-27 10:54 ChokCoco 阅读(8401) 评论(9) 推荐(19) 编辑
摘要:开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 谈谈一 阅读全文
posted @ 2016-09-26 10:30 ChokCoco 阅读(6755) 评论(5) 推荐(17) 编辑