chaihongjun.me

Less语法快速入门

Less语法快速入门

chaihongjun未知

注释 less文件内的单行注释(//),编译之后不会在CSS文件内,只有多行注释(/**/)会保留 嵌套 普通嵌套 #wrap{position:relative;width:300px;height:300px;margin:@zeroauto;#in...

38种HTML5+CSS3的loading效果

38种HTML5+CSS3的loading效果

chaihongjun未知

用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。 这里收集了...

flex布局容器和伸缩项手册

flex布局容器和伸缩项手册

chaihongjun未知

...divclass=containerdivclass=son/divdivclass=son/divdivclass=son/divdivclass=son/divdivclass=son/div/div... .container{flex-direction:row(default)|row-reverse|column|column-reverse#容器内项目的排...

CSS3求婚动画

CSS3求婚动画

sunweilinghttps://segmentfault.com/u/leap

效果图如上图所示 —————————————————————— 首先是新郎的动画 .w-mimg{margin-right:0;float:right;margin-top:60px;animation:toWoman0.5sease.5sboth;...

简单图解flexbox

简单图解flexbox

柴宏俊chaihongjun.me

属性 1. display: flex 示例如下 上面4个 div 默认为 display: block 我们给其父级容器添加 #container{display:flex;} 其实把每个 div 添加了一个 flex context (弹性上下文) 属...

8张动图学会flex布局

8张动图学会flex布局

柴宏俊chaihongjun.me

Flexbox 实现了帮助我们脱离 CSS 苦海(例如垂直居中)的目标,但想精通它却需要你应对一些挑战。所以,我们将通过一些动画让你直观地了解 Flexbox 的工作...

CSS display 属性详解

CSS display 属性详解

zhanfanghttp://zhanfang.github.io/2016

最近瞎忙了好长一段时间,一直没时间写文章,想深入学习一下css的相关属性,所以有了这篇文章,如有错误请指针。 display的所有属性 123456789101112131415...

MobileWeb适配之路

MobileWeb适配之路

柴宏俊chaihongjun.me

最近博主在研究更先进的mobileWeb页面自适应方法,以前是使用的定宽方法,看到网上有三篇文章《 手机端页面自适应解决方案—rem布局 》《 手机端页面自适...

一段导航代码纯CSS效果制作三角形样式

一段导航代码纯CSS效果制作三角形样式

高华峰http://www.jianshu.com/p/030a3

本地测试的时候略有改变 HTML: !DOCTYPEhtmlhtmlheadmetacharset=UTF-8titleDocument/titlelinkrel=stylesheettype=text/csshref=https://necolas.github.io/normalize.css/5.0.0/normalize.csslinkrel=...