前言

收集

纯css实现滚动效果

css实现滚动效果

30s实现css

git地址：https://atomiks.github.io/30-seconds-of-css/

自定义滚动条样式

  1. /* Document scrollbar */
  2. ::-webkit-scrollbar {
  3.   width: 8px;
  4. }
  5. ::-webkit-scrollbar-track {
  6.   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  7.   border-radius: 10px;
  8. }
  9. ::-webkit-scrollbar-thumb {
  10.   border-radius: 10px;
  11.   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  12. }
  13. /* Scrollable element */
  14. .some-element::webkit-scrollbar {
  15. }

自定义文本选择样式

  1. ::selection {
  2.   background: aquamarine;
  3.   color: black;
  4. }
  5. .custom-text-selection::selection {
  6.   background: deeppink;
  7.   color: white;
  8. }

css变量

  1. :root {
  2.   --some-color: #da7800;
  3.   --some-keyword: italic;
  4.   --some-size: 1.25em;
  5.   --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
  6. }
  7. .custom-variables {
  8.   color: var(--some-color);
  9.   font-size: var(--some-size);
  10.   font-style: var(--some-keyword);
  11.   text-shadow: var(--some-complex-value);
  12. }

用户不可选择

  1. .unselectable {
  2.   user-select: none;
  3. }

文字阴影效果

  1. .etched-text {
  2.   text-shadow: 0 2px white;
  3.   font-size: 1.5rem;
  4.   font-weight: bold;
  5.   color: #b8bec5;
  6. }

阴影提示有更多内容

  1. .overflow-scroll-gradient::after {
  2.   content: '';
  3.   position: absolute;
  4.   bottom: 0;
  5.   width: 240px;
  6.   height: 25px;
  7.   background: linear-gradient(
  8.     rgba(255, 255, 255, 0.001),
  9.     white
  10.   ); /* transparent keyword is broken in Safari */
  11.   pointer-events: none;
  12. }

不同方向的三角形

  1. .triangle {
  2.   width: 0;
  3.   height: 0;
  4.   border-top: 20px solid #333;
  5.   border-left: 20px solid transparent;
  6.   border-right: 20px solid transparent;
  7. }

动态下划线

  1. .hover-underline-animation {
  2.   display: inline-block;
  3.   position: relative;
  4.   color: #0087ca;
  5. }
  6. .hover-underline-animation::after {
  7.   content: '';
  8.   position: absolute;
  9.   width: 100%;
  10.   transform: scaleX(0);
  11.   height: 2px;
  12.   bottom: 0;
  13.   left: 0;
  14.   background-color: #0087ca;
  15.   transform-origin: bottom right;
  16.   transition: transform 0.25s ease-out;
  17. }
  18. .hover-underline-animation:hover::after {
  19.   transform: scaleX(1);
  20.   transform-origin: bottom left;
  21. }

单行居中，多行居左效果

需要借助两个标签来实现

  1. <style>
  2.   .container{text-align:center;}
  3.   .container .content{
  4.     display:inline-block;
  5.     text-align:left;
  6.   }
  7. </style>
  8. <div class="container">
  9.   <p class="content"></p>
  10. </div>