一些常用的 CSS 代码块,

CSS Snippets

45个值得收藏的 CSS 形状

/* 像素心: box-shadow */
.pxheart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105px;
  height: 105px;
  margin: -52.5px 0 0 -52.5px;
}
.pxheart::before {
  content: '';
  display: block;
  transition: all 400ms;
  width: 15px;
  height: 15px;
  margin: -15px 0 0 -15px;
  box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000;
  animation: pulse 1.2s steps(1) infinite;
}

↑ Back to Top

媒体查询兼容 ios 各手机

主样式在前, 媒体查询样式在后, 覆盖前面的样式

/**
 * device-height:
 * 480px //=> iphone4/4s
 * 568px //=> iphone5
 * 667px //=> iphone6
 * 736px //=> iphone6P
 * 812px //=> iphoneX
 */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
  /* 兼容iphone4/4s */
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
  /* 兼容iphone5 */
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){
  /* 兼容iphone6 */
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){
  /* 兼容iphone6 Plus */
}
@media (device-height:812px) and (-webkit-min-device-pixel-ratio:2){
  /* 兼容iphoneX */
}

↑ Back to Top

/**
 * 
 */

↑ Back to Top

/**
 * 
 */

↑ Back to Top

/**
 * 
 */

↑ Back to Top