一些有趣的css样式

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

/************** 滚动条 **************/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: #647ea0;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: #647ea0
}


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  height: 6px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 7px;
  background-color: #9d9d9d;
  box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}

::selection {
  background: #da1333;
  color: #fff;
}

html,
body {
  // 鼠标样式
  cursor: url("https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/arrow.cur"), auto;
}

  transition: all 0.25s ease-in-out 0.16s;

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);

box-shadow: -15px 0px 12px -12px rgb(0 0 0 / 30%);

box-shadow: 8px 0px 5px -6px rgb(0 0 0 / 30%);

box-shadow: 0px -8px 8px -6px rgb(0 0 0 / 30%);

box-shadow: 0 6px 4px -2px rgb(0 0 0 / 12%);

  background: hsla(0, 0%, 100%, 0.1);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 5px rgba(139, 136, 136, 0.6);

mix-blend-mode: multiply; //正片叠底

mix-blend-mode: screen; //滤色

mix-blend-mode: overlay; //叠加

mix-blend-mode: darken; //变暗

mix-blend-mode: lighten; //变亮

/* 渐变轴为45度，从蓝色渐变到红色 如果不设置过度中心点 默认为50%开始转变 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度 40% 位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 渐变轴为45%, 从透明到红色 从透明起点5%开始渐变, 设置过度中心点也在5% 这样可以实现一个剪切的效果 */
linear-gradient(45deg, transparent 5%, 5%, red);
linear-gradient(45deg, transparent 5%, red 5%); /* 也可以这样写 不设置过度中心点, 但是设置红色渐变的起点在5% */

 // 设置一个渐变的背景并且进行旋转
background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 // 设置右侧阴影
box-shadow: 6px 0px 0px 0px #00e6f6;

background: linear-gradient(
  45deg, // 旋转45°
  transparent 3%, // 透明3%
  red 3%, // 从3%开始变红
  5%, // 从5%设备过渡点
  blue 5% // 从5%开始变蓝
  );

// 也可以这样写
background: linear-gradient(
  45deg, // 旋转45°
  transparent 3%, // 透明3%
  red 3%, // 从3%开始变红
  red 5%, // 从5%设备过渡点
  blue 5% // 从5%开始变蓝
  );

/* 一个倾斜 45 度的重复线性渐变，
   从蓝色开始渐变到红色 */
repeating-linear-gradient(45deg, blue, red);

/* 一个从右下角到左上角的重复线性渐变，
   从蓝色开始渐变到红色 */
repeating-linear-gradient(to left top, blue, red);

/* 一个由下至上的重复线性渐变，
   从蓝色开始，40% 后变绿，
   最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);

// 从上到下50%处 左边王莉6px 从下倒上20%处 开始剪切 相当于在中考下剪切了30%部分
clip-path: inset(50% -6px 20% 0);
// 平移-20px更凸显剪切
transform: translateX(-20px);

/**  transition 和 animation 属性定义赛贝尔曲线 **/
.block {
    /** 简写 **/
	transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
    animation: glitched 0.6s cubic-bezier(0.37, 0, 0.63, 1);
    /** 指定过度/动画执行的方式 多个属性通过, 分割steps()是步长用来设置动画帧数 **/
    transition-timing-function: steps(2, end), cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-timing-function: steps(2, end), cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

animation-timing-function: ease;

@keyframes twinkling{ 
  0%{ 
    opacity: 0; 
  } 
  100%{ 
    opacity: 1; /** 会存在渐变效果 **/
  } 
}

// 一闪一闪动画
.twinkle{ 
  animation: twinkling 0.5s infinite linear; 
} 
.animated{ 
  animation-duration: 0.5s; 
} 

@keyframes twinkling{ 
  0%, 50%{ 
    opacity: 0; 
  } 
  51%, 100%{ 
    opacity: 1; /** 不会存在渐变效果 **/
  } 
}

  .one-box {
    height: 100svh;
    width: 100svw;
    background-image: radial-gradient(#00000021 1px, transparent 1px);
    background-size: 5px 5px;
    background-position: -13px -3px;
  }

.select-none {
  user-select: none;
}

LKaiLi

一些有趣的css样式

一些有趣的css样式

# 优化页面全局属性

# 修改webkit浏览器自带的滚动条 `webkit`

# 有边距的滚动条

# 修改浏览器自带的选中效果 `::selection`

# 修改浏览器自带的鼠标效果 `cursor`

# 设置线性过度 `transition`

# 设置阴影特效 `box-shadow`

# 整体的阴影特效

# 上下左右阴影的实现

# 缩放功能 `transform: scale()`

# 根据内容 width自适应宽度

# 实现一个毛玻璃特性

# mix-blend-mode 内容和背景混合模式

# text-align-last 文本中最后一行对齐

# dvh 和 dvw 自适应视口

# linear-gradient 渐变属性

# repeating-linear-gradient 线性渐变

# clip-path 剪切功能

# inset() 矩形插图

# Css过度效果的简单记录

# animation动画取消过渡效果

# 点状背景效果

# user-select 取消用户选择

LKaiLi

一些有趣的css样式

一些有趣的css样式

# 优化页面全局属性

# 修改webkit浏览器自带的滚动条 webkit

# 有边距的滚动条

# 修改浏览器自带的选中效果 ::selection

# 修改浏览器自带的鼠标效果 cursor

# 设置线性过度 transition

# 设置阴影特效 box-shadow

# 整体的阴影特效

# **上下左右阴影的实现 **

# 缩放功能 transform: scale()

# 根据内容 width自适应宽度

# 实现一个毛玻璃特性

# mix-blend-mode 内容和背景 混合模式

# text-align-last 文本中最后一行对齐

# dvh 和 dvw 自适应视口

# linear-gradient 渐变属性

# repeating-linear-gradient 线性渐变

# clip-path 剪切功能

# inset() 矩形插图

# Css过度效果的简单记录

# animation动画取消过渡效果

# 点状背景效果

# user-select 取消用户选择

# 修改webkit浏览器自带的滚动条 `webkit`

# 修改浏览器自带的选中效果 `::selection`

# 修改浏览器自带的鼠标效果 `cursor`

# 设置线性过度 `transition`

# 设置阴影特效 `box-shadow`

# 上下左右阴影的实现

# 缩放功能 `transform: scale()`

# mix-blend-mode 内容和背景混合模式