设置浏览器滚动条颜色

  1. ::-webkit-scrollbar-track-piece{width:8px;background-color:#0b0c11}
  2. ::-webkit-scrollbar{width:8px;background-color:#e71822}
  3. ::-webkit-scrollbar-thumb{width:8px;background-color:#e71822}
  4. ::-webkit-scrollbar-thumb:hover{width:8px;background-color:#3d3d3d}

好看的阴影

  1. box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
  2. box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 5px 0px;  // box 阴影
  3. box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 1px 0px; // 按钮边框

好看的字体

  1. font-family: Crimson Text, Georgia, serif;

设置input[placeholder]的样式

  1. ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
  2.     color: #999999;
  3. }
  4. ::-moz-placeholder { /* Firefox 19+ */  
  5.     color: #999999;
  6. }
  7. :-ms-input-placeholder { /* IE 10+ */ 
  8.     color: #999999;
  9. }
  10. :-moz-placeholder { /* Firefox 18- */ 
  11.     color: #999999;
  12. }

去除input[type=date]的默认样式

  1. input[type="date"]::-webkit-calendar-picker-indicator {
  2.     display: none;
  3. }
  4. input[type="date"]::-webkit-clear-button{
  5.     display:none;
  6. }
  7. input[type="time"], input[type="date"] {
  8.     border: none;
  9.     appearance:none;
  10.     -moz-appearance:none;
  11.     -webkit-appearance:none;
  12.     background: none;
  13. }
  14. input[type="time"]::-ms-expand, 
  15. input[type="date"]::-ms-expand{ 
  16.     display: none;
  17. }

好看的动态Button

buttonAnimation.gif

  1. body {
  2.       display: flex;
  3.       height: 100vh;
  4.       justify-content: center;
  5.       align-items: center;
  6.       background: #eceffc;
  7.   }
  9.   .btn {
  10.       --hue: 190;
  11.       --btn-bg-color: hsl(var(--hue), 100%, 50%);
  12.       --btn-bg-color-darker: hsl(var(--hue), 100%, 45%);
  13.       position: relative;
  14.       padding: 0.75rem 1.5rem;
  15.       margin: 1rem;
  16.       font-size: 1rem;
  17.       font-family: Lato, sans-serif;
  18.       line-height: 1.5;
  19.       color: white;
  20.       text-decoration: none;
  21.       background-color: var(--btn-bg-color);
  22.       border: 1px solid var(--btn-bg-color);
  23.       border-radius: 4px;
  24.       box-shadow: 0 0.1px 0.7px rgba(233, 30, 99, 0.141), 0 0.1px 1.7px rgba(233, 30, 99, 0.202), 0 0.3px 3.1px rgba(233, 30, 99, 0.25), 0 0.4px 5.6px rgba(233, 30, 99, 0.298), 0 0.8px 10.4px rgba(233, 30, 99, 0.359), 0 2px 25px rgba(233, 30, 99, 0.5);
  25.       outline: transparent;
  26.       overflow: hidden;
  27.       cursor: pointer;
  28.       user-select: none;
  29.       white-space: nowrap;
  30.       transition: 0.25s;
  31.   }
  33.   .btn-pink {
  34.       --hue: 330;
  35.   }
  37.   .btn-bubbles {
  38.       overflow: visible;
  39.       transition: transform ease-in 0.1s, background-color ease-in 0.1s, box-shadow ease-in 0.25s;
  40.   }
  42.   .btn-bubbles::before {
  43.       position: absolute;
  44.       content: "";
  45.       left: -2em;
  46.       right: -2em;
  47.       top: -2em;
  48.       bottom: -2em;
  49.       transition: ease-in-out 0.5s;
  50.       background-repeat: no-repeat;
  51.       background-image: radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, var(--btn-bg-color) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, var(--btn-bg-color) 20%, transparent 20%), radial-gradient(circle, var(--btn-bg-color) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, var(--btn-bg-color) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, var(--btn-bg-color) 20%, transparent 20%), radial-gradient(circle, var(--btn-bg-color) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, transparent 20%, var(--btn-bg-color) 20%, transparent 30%), radial-gradient(circle, var(--btn-bg-color) 20%, transparent 20%);
  52.       background-size: 12% 16%, 14% 16%, 14% 15%, 15% 14%, 19% 11%, 13% 17%, 20% 17%, 16% 12%, 18% 13%, 13% 15%, 20% 17%, 14% 19%, 20% 19%, 11% 13%, 14% 19%, 12% 10%;
  53.       background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;
  54.       animation: bubbles ease-in-out 0.75s forwards;
  55.   }
  57.   .btn-bubbles:active {
  58.       transform: scale(0.95);
  59.       background: var(--btn-bg-color-darker);
  60.   }
  62.   .btn-bubbles:active::before {
  63.       animation: none;
  64.       background-size: 0;
  65.   }
  67.   @keyframes bubbles {
  68.       0% {
  69.           background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;
  70.       }
  72.       50% {
  73.           background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%, 75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%, 68% 96%, 95% 100%;
  74.       }
  76.       100% {
  77.           background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%, 100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%, 100% 100%;
  78.           background-size: 0% 0%;
  79.       }
  80.   }
  1. <button class="btn btn-pink btn-bubbles">Click Me</button>

3D旋转图片预览

3dPic.gif

  1. body {
  2.       display: -webkit-box;
  3.       display: flex;
  4.       -webkit-box-pack: center;
  5.       justify-content: center;
  6.       -webkit-box-align: center;
  7.       align-items: center;
  8.       height: 100vh;
  9.       background: black;
  10.   }
  12.   .scene {
  13.       width: 1000px;
  14.       display: -webkit-box;
  15.       display: flex;
  16.       -webkit-box-pack: justify;
  17.       justify-content: space-between;
  18.       -webkit-perspective: 800px;
  19.       perspective: 800px;
  20.   }
  22.   .scene .card {
  23.       position: relative;
  24.       width: 240px;
  25.       height: 300px;
  26.       color: white;
  27.       cursor: pointer;
  28.       -webkit-transition: 1s ease-in-out;
  29.       transition: 1s ease-in-out;
  30.       -webkit-transform-style: preserve-3d;
  31.       transform-style: preserve-3d;
  32.   }
  34.   .scene .card:hover {
  35.       -webkit-transform: rotateY(0.5turn);
  36.       transform: rotateY(0.5turn);
  37.   }
  39.   .scene .card .card__face {
  40.       position: absolute;
  41.       top: 0;
  42.       left: 0;
  43.       width: 100%;
  44.       height: 100%;
  45.       -webkit-backface-visibility: hidden;
  46.       backface-visibility: hidden;
  47.       -webkit-transition: 1s ease-in-out;
  48.       transition: 1s ease-in-out;
  49.       -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
  50.   }
  52.   .scene .card .card__face img {
  53.       width: 240px;
  54.       height: 300px;
  55.       -o-object-fit: cover;
  56.       object-fit: cover;
  57.   }
  59.   .scene .card .card__face--back {
  60.       -webkit-transform: rotateY(0.5turn);
  61.       transform: rotateY(0.5turn);
  62.   }
  1. <div class="scene">
  2.     <div class="card">
  3.         <div class="card__face card__face--front">
  4.             <img src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" />
  5.         </div>
  6.         <div class="card__face card__face--back">
  7.             <img src="https://i.loli.net/2019/11/16/cqyJiYlRwnTeHmj.jpg" />
  8.         </div>
  9.     </div>
  10.     <div class="card">
  11.         <div class="card__face card__face--front">
  12.             <img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" />
  13.         </div>
  14.         <div class="card__face card__face--back">
  15.             <img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" />
  16.         </div>
  17.     </div>
  18.     <div class="card">
  19.         <div class="card__face card__face--front">
  20.             <img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" />
  21.         </div>
  22.         <div class="card__face card__face--back">
  23.             <img src="https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg" />
  24.         </div>
  25.     </div>
  26. </div>

兼容全面屏

  1. @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3), only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3), only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)
  2. xxx {
  3.     padding-bottom: calc(env(safe-area-inset-bottom) - 16px)!important;
  4. }