chaihongjun.me

38种HTML5+CSS3的loading效果

38种HTML5+CSS3的loading效果

chaihongjun阅读(109)未知

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

flex布局容器和伸缩项手册

flex布局容器和伸缩项手册

chaihongjun阅读(123)未知

...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求婚动画

sunweiling阅读(91)https://segmentfault.com/u/leap

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

简单图解flexbox

简单图解flexbox

柴宏俊阅读(99)chaihongjun.me

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

8张动图学会flex布局

8张动图学会flex布局

柴宏俊阅读(87)chaihongjun.me

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

CSS display 属性详解

CSS display 属性详解

zhanfang阅读(177)http://zhanfang.github.io/2016

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

MobileWeb适配之路

MobileWeb适配之路

柴宏俊阅读(71)chaihongjun.me

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

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

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

高华峰阅读(153)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=...

纯CSS3实现鼠标经过图片缩放效果且不放大尺寸

纯CSS3实现鼠标经过图片缩放效果且不放大尺寸

柴宏俊阅读(76)chaihongjun.me

常常我们觉得一些页面动画效果需要用到JS的其实CSS3也都可以实现。我们在很多WP博客可以发现作者的文章列表页面也就是栏目页,当鼠标经过文章的缩略...

鼠标经过文字,文字左偏移或者右偏移

鼠标经过文字,文字左偏移或者右偏移

柴宏俊阅读(133)chaihongjun.me

常见的博客很多有这样一种效果,当鼠标移到博客列表标题的时候,标题文字会向右移动一定距离,当鼠标离开的时候又恢复。这样的操作其实非常简单,...