分类:前端开发

【CSS进阶】伪元素的妙用--单标签之美

【CSS进阶】伪元素的妙用--单标签之美
最近在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目:CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看)。采用单标签完成各种图...

3年前 (2016-05-29) 1192℃ 评论 () 716喜欢

jQuery选择器总结

jQuery选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素...

3年前 (2016-05-25) 867℃ 评论 () 430喜欢

CSS基础(二):基础和语法

CSS基础(二):基础和语法
CSS语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。selector { declaration1; declaration2; declaration...

3年前 (2016-05-23) 772℃ 评论 () 454喜欢

CSS vs JS动画:谁更快?

CSS vs JS动画:谁更快?
这篇文章翻译自 Julian Shapiro 的 CSS vs. JS Animation: Which is Faster?。Julian Shapiro 也是 Velocity.js 的创造者。这是一个非常高效、简单易用的JS动画库。他在Web...

4年前 (2016-05-19) 1020℃ 评论 () 450喜欢

基于视窗单位的排版

基于视窗单位的排版
我之前有写过基于rem和em的响应式排版,并且也有写过两篇有关模块化组件的博客。在这些文章中,有关视窗单位的评论不可避免的形成了一个话题。曾经一段时间我十分抵制使用视窗...

4年前 (2016-05-05) 862℃ 评论 () 384喜欢

CSS3 3D 行星运转动画 + 浏览器渲染原理

CSS3 3D 行星运转动画 + 浏览器渲染原理
承接上一篇:《CSS3进阶:酷炫的3D旋转透视》 。最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家。CSS3 3D 行星运转 demo 页面请戳:Demo。(建议使用Chrome打开)本文完整...

4年前 (2016-05-03) 761℃ 评论 () 660喜欢

CSS3进阶:酷炫的3D旋转透视

CSS3进阶:酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣。最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关...

4年前 (2016-05-02) 853℃ 评论 () 661喜欢

CSS3 图片滤镜 (Filters)

CSS3 图片滤镜 (Filters)
滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果,经常使用PhotoShop的人应该非常清楚,每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜...

4年前 (2016-04-28) 2147℃ 评论 () 456喜欢

CSS样式表中属性选择器的四种格式

CSS样式表中属性选择器的四种格式
CSS样式表中属性选择器的格式是元素后跟中括号,中括号内带属性或者属性表达式等,他有四种格式,分别是简易属性选择器,精确属性值选择器,部分属性值选择器和非凡属性选择器。
...

4年前 (2016-04-13) 1036℃ 评论 () 318喜欢

css3实践—创建3D立方体

css3实践—创建3D立方体
要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果。不过有很多需要注意的地方,这里把我学习的方法,过程分...

4年前 (2016-04-10) 1000℃ 评论 () 343喜欢

CSS3弹性布局

CSS3弹性布局
弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。弹性布局的主要思想是让容器有能力来改变...

4年前 (2016-04-04) 2305℃ 评论 () 383喜欢

CSS3 border-radius实现边框圆角

CSS3 border-radius实现边框圆角
一、基本语法:border-radius : none | <length>{1,4} [/ <length>{1,4} ]?二、取值范围:<length>: /*由浮点数字和单位标识符组成的长度值。不可为负值。*/三、简单说明:1、borde...

4年前 (2016-04-04) 623℃ 评论 () 339喜欢

以20像素为基准的CSS网页布局实践分享

以20像素为基准的CSS网页布局实践分享
一、一切从line-height行高说起想想看,你CSS构建页面的时候,默认的字体大小和行高分别是多少?下面是我统计的一些数据:新浪微博:12px/1.5腾讯微博:12px/1.75淘宝网/天猫/腾讯微云:1...

4年前 (2016-03-31) 776℃ 评论 () 388喜欢

CSS3盒模型——box-sizing

CSS3盒模型——box-sizing
box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高。目前比较火的...

4年前 (2016-03-21) 1154℃ 评论 () 330喜欢

CSS3贝塞尔曲线(cubic-bezier)参数详解

CSS3贝塞尔曲线(cubic-bezier)参数详解
timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效,有多种特效展示。这里得涉及到一个学术性的话题:貝茲曲線。W3C给出的一张曲线图。cubic-bezi...

4年前 (2016-03-20) 3376℃ 评论 () 325喜欢

详解 CSS 属性 - 伪类和伪元素的区别

详解 CSS 属性 - 伪类和伪元素的区别
之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究...

4年前 (2016-03-16) 1108℃ 评论 () 282喜欢

干货|移动端H5前端性能优化

干货|移动端H5前端性能优化
得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长。2016年1月艾瑞咨询发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123.2%,在网购总交...

4年前 (2016-03-03) 540℃ 评论 () 287喜欢

CSS技巧和经验

CSS技巧和经验
​CSS技巧和经验列表(以下实例默认运行环境都为Standard mode)...

4年前 (2016-03-02) 445℃ 评论 () 244喜欢

提高CSS文件可维护性的五种方法

提高CSS文件可维护性的五种方法
当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成。...

4年前 (2016-02-28) 272℃ 评论 () 237喜欢

javascript实现全选和反选

javascript实现全选和反选
利用 javascript 做一个全选和反选的功能,如有不足请大家补充!实现思路1、获取所有需要选中的元素,getElementsByName()全选()反选Helloweb前端网UI设计移动开发...

4年前 (2016-02-05) 608℃ 评论 () 153喜欢

css3 星球椭圆运动轨迹

css3 星球椭圆运动轨迹
上一个项目里碰到了要写一个星球运动的动画,其中主要的点就是用css3如何实现椭圆运动。上网找了很久,看到一个“css3太阳系”的文章介绍,但可惜是正圆的,给人的感觉是平面,不适合...

4年前 (2016-02-03) 5906℃ 评论 () 176喜欢

node.js学习笔记(17) cluster

node.js学习笔记(17) cluster
从笔记(14)就提及多进程,今日总算可以进入正题。从v0.6.x开始,Node.js提供了多进程模块cluster,允许创建一组进程来共享同一个socket,并且分担负载压力。官方文档是这样说的:A sing...

4年前 (2016-02-03) 321℃ 评论 () 129喜欢