Li Chao astrocean

🎯

调焦

astrocean / gist:a0c28a5d016b483d75a25f9ff483e1fa

Created July 23, 2018 09:38

execjs not use eval

astrocean / dabblet.css

Created June 23, 2016 01:36 — forked from csssecrets/dabblet.css

Bouncing animation

	/**
	* Bouncing animation
	*/

	@keyframes bounce {
	60%, 80%, to {
	transform: translateY(400px);
	animation-timing-function: ease;
	}
	70% { transform: translateY(300px); }

astrocean / dabblet.css

Last active June 22, 2016 09:38 — forked from csssecrets/dabblet.css

Interactive image comparison - with CSS resize

	/**
	* Interactive image comparison - with CSS resize
	*/

	.image-slider {
	position:relative;
	display: inline-block;
	width:382.5px;
	height:340px;
	overflow:hidden;

astrocean / dabblet.css

Created June 22, 2016 07:39 — forked from csssecrets/dabblet.css

Letterpress

	/**
	* Letterpress
	*/

	body {
	font: 250%/1.6 Baskerville, Palatino, serif;
	}

	p {
	padding: .8em 1em;

astrocean / dabblet.css

Created June 22, 2016 06:58 — forked from csssecrets/dabblet.css

Adjusting tabs

	/**
	* Adjusting tabs
	*/

	pre {
	padding: .5em;
	line-height: 1.5;
	background: hsl(20, 50%, 95%);
	font-family: Consolas, Monaco, monospace;
	font-variant-ligatures: common-ligatures

astrocean / dabblet.css

Last active June 22, 2016 06:13

folded-corner

	/**
	* folded-corner
	*/
	div{
	position:relative;
	background: #f06;
	background: linear-gradient(210deg,transparent 30px,#f06 0) no-repeat;
	margin:100px;
	padding:20px;
	height:100px;

astrocean / dabblet.css

Last active June 17, 2016 07:04

The first commented line is your dabblet’s title

	/**
	* The first commented line is your dabblet’s title
	*/
	background: background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);

astrocean / dabblet.css

Last active June 17, 2016 06:54

Chessboard-step

	/**
	* Chessboard-step
	*/

	background: #eee;
	background-image: linear-gradient(45deg,#f06 25%,transparent 0,
	transparent 75%,yellow 0),
	linear-gradient(45deg,#f06 25%,transparent 0,
	transparent 75%,yellow 0);
	background-size:30px 30px;

astrocean / dabblet.css

Last active June 17, 2016 06:46

Chessboard

	/**
	* Chessboard
	*/
	background: #eee;
	background-image:
	linear-gradient(45deg,#bbb 25%, transparent 0,
	transparent 75%,#bbb 0),
	linear-gradient(45deg,#bbb 25%, transparent 0,transparent 75%,#bbb 0);
	background-size: 30px 30px;
	background-position:0 0,15px 15px;

astrocean / dabblet.css

Last active June 17, 2016 06:14

dot supper

	/**
	* dot supper
	*/

	background: #f06;
	background-image: radial-gradient(yellow 30%,transparent 0),
	radial-gradient(yellow 30%,transparent 0);
	background-size:30px 30px;
	background-position:0 0,15px 15px;