ChanMenglin

// ES6
// 解构json对象可以快速从json对象取值

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

ChanMenglin

bg-attachment:fixed parallax

A Pen by Menglin Chen on CodePen.

HTML页面布局

License.

ChanMenglin

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>

ChanMenglin

- var categories = ['alkali-metals','alkaline-earth-metals','lanthanoids','actinoids','transition-metals','post-transition-metals','metalloids','other-nonmetals','noble-gasses','unknown']

// ELEMENT MIXIN TEMPLATE
mixin element(number, symbol, name, mass, weight, material, column, row)
  .element(class=material)(class='c'+column)(class='r'+row)
    input.activate(type='radio', name='elements')
    input.deactivate(type='radio', name='elements')
    .overlay
    .square
      .model

ChanMenglin

CSS Illustration #1 - Bicycle

Bicycle animation with pure CSS

css 动画，可做loading

A Pen by Albert Feynman on CodePen.

License.

ChanMenglin

<div class="loader">
	<div class="loader-inner">
		<div class="loader-line-wrap">
			<div class="loader-line"></div>
		</div>
		<div class="loader-line-wrap">
			<div class="loader-line"></div>
		</div>
		<div class="loader-line-wrap">
			<div class="loader-line"></div>

ChanMenglin

<canvas id=c></canvas>
<a href=http://hd4desktop.com/669-colours-circle-rainbow-hd-wallpaper/><img src=http://hd4desktop.com/images/m/a-colours-circle-rainbow-HD-Wallpaper.jpg ></a>

ChanMenglin

.loader
    .spinner.yellow
    .spinner.orange
    .spinner.red
    .spinner.pink
    .spinner.violet
    .spinner.mauve
    .spinner.light-yellow

ChanMenglin

.tabs
  .tabs__background
  .tabs__tab.tabs__tab--first.is-active This is a tab
  .tabs__tab.tabs__tab--second This is another (longer) tab

ChanMenglin

Full page, folder tab navigation

Move your cursor over the folders and tabs to progress through each page, no clicking necessary, no JavaScript.

A Pen by Menglin Chen on CodePen.

License.