Skip to main content

常用样式

helght:100%和100vh​

helght: 100%; /* 子元素不会自动撑开(div) */

helght: 100vh; /* 子元素自动撑开(div) */

背景毛玻璃​

字体自动换行​

word-break:normal;
  • word-break:
    • normal(使用浏览器默认的换行规则)
    • break-all(允许单词内换行)
    • keep-all(只能在半角空格或连字符处换行)
white-space:pre-warp;

  • white-space:

    white-space属性设置如何处理元素内的空白。

    这个属性声明建立布局中如何处理元素中的空白字符，

    • normal(默认。空白会被忽略)、

    • pre(空白会被浏览器保留。其行为方式类似HTML代码中的<pre>标签)

    • nowrap（文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止）

    • pre-wrap（保留空白符序列，但是正常的换行）

    • pre-line（合并空白符序列，但是保留空白 符）

    • inherit（规定应该从父元素继承white-space属性的值）

word-wrapL:break-word;

  • word-wrap

    允许长单词换行到下一行；有两个值：normal（只允许在断字点换行）、break-word(在长单词或者URL地址内部进行换行)

鼠标悬浮变手指​

常见样式：https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

cursor: pointer

分割线​

会移动的渐变色（圆形）​

html, body
  width 100vw
  height 100vh

// 1 首先使用 radial-gradient 定义5个带closest-side属性的圆形渐变 （径向渐变）
// 2 五个径向渐变的尺寸和位置都采用 vmax 定位来保证移动设备上的效果一直
// 3 no-repeat 消除多余重复的平铺渐变
body
  background-color #B789E5
  background-image: 
    radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
    radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
    radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
    radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
    
  background-size: 
    130vmax 130vmax, 
    80vmax 80vmax, 
    90vmax 90vmax, 
    110vmax 110vmax, 
    90vmax 90vmax
    
  background-position: 
    -80vmax -80vmax, 
    60vmax -30vmax, 
    10vmax 10vmax, 
    -30vmax -10vmax, 
    50vmax 50vmax;
    
  background-repeat no-repeat
  animation 6s movement linear infinite
  

// 4 创建动画动作，通过background-size和background-position每次调整原，让其有轻微的移动轨迹
@keyframes movement
  0%, 100%
    background-size 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax
    background-position -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax

  25%
    background-size 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax
    background-position -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax

  50%
    background-size 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax
    background-position -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax

  75%
    background-size 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax
    background-position -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax
      
// 5 创建一个前置图层，使用 blur 效果（模糊滤镜）
body::after
  content ''
  display block
  position fixed
  width 100%
  height 100%
  top 0
  left 0
  backdrop-filter blur(104px)
.cps__element_background1 {
  margin: 0;
  min-height:300px;
  height: 100%;
  width: 100%;
  background-color: #e493d0;
  background-image: 
    radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
    radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
    radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
    radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
  background-size: 
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position:
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 1s movement linear infinite;
}

.cps__element_background1::after {
  content: '';
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


@keyframes movement {
  0%, 100% {
    background-size: 
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
    background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  }
  25% {
    background-size: 
      100vmax 100vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      60vmax 60vmax;
    background-position:
      -60vmax -90vmax,
      50vmax -40vmax,
      0vmax -20vmax,
      -40vmax -20vmax,
      40vmax 60vmax;
  }
  50% {
    background-size: 
      80vmax 80vmax,
      110vmax 110vmax,
      80vmax 80vmax,
      60vmax 60vmax,
      80vmax 80vmax;
    background-position:
      -50vmax -70vmax,
      40vmax -30vmax,
      10vmax 0vmax,
      20vmax 10vmax,
      30vmax 70vmax;
  }
  75% {
    background-size: 
      90vmax 90vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      70vmax 70vmax;
    background-position:
      -50vmax -40vmax,
      50vmax -30vmax,
      20vmax 0vmax,
      -10vmax 10vmax,
      40vmax 60vmax;
  }
}