qzm
/ requestAnimationFrame.js
Last active
April 27, 2016 11:31
requestAnimationFrame and cancelAnimationFrame
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // requestAnimationFrame | |
| window.requestAnimationFrame = | |
| window.requestAnimationFrame || | |
| window.webkitRequestAnimationFrame || | |
| window.mozRequestAnimationFrame || | |
| window.oRequestAnimationFrame || | |
| window.msRequestAnimationFrame || | |
| function(callback) { | |
| setTimeout(callback, 1000 / 60); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| .popup { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .calssName { | |
| transform: translateZ(0); | |
| } | |
| .className { | |
| transform: translate3d(0, 0, 0); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box { | |
| width: 100px; | |
| height: 100px; | |
| border: 1px #111 solid; | |
| position: relative; | |
| transition: background-color 1s ease; | |
| transition: width 1s ease; | |
| animation-name: mymove; | |
| animation-duration: 3s; | |
| animation-timing-function: linear; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .triangl { | |
| /* 设置div的高度和宽度为 0 ，使得整个box只有border的部分 */ | |
| height: 0; | |
| width: 0; | |
| /* 设置border为需要的宽度，并隐藏其他三边，这样三角形就出来了 */ | |
| border-width: 15px; | |
| border-style: solid; | |
| border-color: transparent transparent #CCC transparent; | |
| } |
qzm
/ bootstrap3-media-query.css
Last active
December 28, 2016 04:04
— forked from redfrost/Media Query
Bootstrap3 Media Query
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Desktop */ | |
| @media (min-width: 1601px) { } | |
| /* Laptop */ | |
| @media (min-width: 1200px) { } | |
| /* Tablet Horizontal */ | |
| @media (min-width: 992px) and (max-width: 1199px) { } | |
| /* Tablet Vertical */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 方法一：1个vw 单位，代表1%视窗单位，相对的还有 hv ，代表一个视窗高度 */ | |
| .square { | |
| width : 25%; | |
| height : 25vw; | |
| } | |
| /* 方法二：height 为0，使用padding撑开高度，padding的百分比根据所在block的宽度来计算的 */ | |
| .square { | |
| width : 25%; | |
| height : 0; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 方法一：使用table-cell 垂直居中*/ | |
| .fatherNode { | |
| display : table-cell; | |
| } | |
| .childNode { | |
| vertical-align : middle; | |
| } | |
| /* 方法二：设置top为50%，top的定位为负数的1/2高度 */ | |
| .className { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .clearfix:before, | |
| .clearfix:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .clearfix:after { | |
| clear: both; | |
| } | |
| .clearfix { |