04-radial-gradient

B 站视频教程

准备好 index.html 中的容器

创建 src/style/02-radial-gradient.scss

.example {
  width: 150px;
  height: 150px;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

// 默认的渐变位置是从圆心开始向外扩散
// 当容器的形状是正方形的时候，渐变的形状 圆形
.example1 {
  background-image: radial-gradient(#ace, #fc9);
}

// 渐变的形状也可以指定为 椭圆渐变
.example2 {
  background-image: radial-gradient(100px 50px ellipse, #ace, #fc9);
}

// 渐变的形状，会根据容器的形状自动生成
// 当容器的形状是正方形的时候，渐变的形状是 椭圆形
.example3 {
  background-image: radial-gradient(#ace, #fc9);
  height: 80px;
}

.example4 {
  background-image: radial-gradient(#ace, #fc9);
  height: 80px;
  border-radius: 50%;
}

// 当渐变的形状为 椭圆形 的时候，我们还可以强制将其改为 圆形
.example5 {
  background-image: radial-gradient(circle, #ace, #fc9);
  height: 80px;
}

// 我也可以通过指定半径的大小，强制将 椭圆渐变 改为 圆形渐变
.example6 {
  background-image: radial-gradient(85px, #ace, #fc9);
  height: 80px;
}

// 可以同时指定多个 渐变色
.example7 {
  background-image: radial-gradient(#ace, #fc9, #ace);
}

// 也可以指定 渐变色的位置
.example8 {
  background-image: radial-gradient(#ace 10%, #fc9 10%, #ace);
}

// 同时指定 渐变半径， 渐变形状，及渐变色的位置
.example9 {
  background-image: radial-gradient(
    25px 50px ellipse,
    #ace 20px,
    #fc9 21px,
    #ace
  );
}

// 修改 渐变的圆心位置
.example10 {
  background-image: radial-gradient(at 25px 25px, #ace, #fc9, #ace);
}

// 圆心在 右下角 的情况
.example11 {
  background-image: radial-gradient(at 100% 100%, #ace, #fc9, #ace);
}

// 圆心在 左下角 的情况
.example12 {
  background-image: radial-gradient(at 0 100%, #ace, #fc9, #ace);
}

// 圆心在 右上角 的情况
.example13 {
  background-image: radial-gradient(at 100% 0, #ace, #fc9, #ace);
}

// 圆心在 左上角 的情况
.example14 {
  background-image: radial-gradient(at 0 0, #ace, #fc9, #ace);
}

// 上面的例子中，我们修改了圆心的位置，我们还可以通过四种渐变类型，修改 中心圆 的终止位置
// closest-side 渐变中心距离容器最近的边作为终止位置。
// closest-corner 渐变中心距离容器最近的角作为终止位置。
// farthest-side 渐变中心距离容器最远的边作为终止位置。
// farthest-corner 渐变中心距离容器最远的角作为终止位置。

.example15 {
  background-image: radial-gradient(closest-side at 25px 25px, #ace, #fc9);
  width: 300px;
}

.example16 {
  background-image: radial-gradient(closest-corner at 25px 25px, #ace, #fc9);
  width: 300px;
}

.example17 {
  background-image: radial-gradient(farthest-side at 25px 25px, #ace, #fc9);
  width: 300px;
}

.example18 {
  background-image: radial-gradient(farthest-corner at 25px 25px, #ace, #fc9);
  width: 300px;
}

// 通过径向渐变 实现眼睛效果
.example19,
.example20 {
  background: radial-gradient(
      75px 30px ellipse,
      transparent 50px,
      #ace 60px,
      #fc9 65px,
      transparent 65px
    ), radial-gradient(15px circle, #555 15px, transparent 15px);
  border: 10px solid #555;
  height: 100px;
  border-radius: 20%;
}

// 可重复的径向渐变效果
.example21 {
  background-image: repeating-radial-gradient(#ace 0 10px, #fc9 10px 20px);
}

// 通过径向渐变 实现唱片效果
.example22 {
  border: 1px solid red;
  background-image: linear-gradient(
    30deg,
    transparent 40%,
    rgba(black, 0.5) 40%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
}

.example23 {
  border: 1px solid red;
  background-image: linear-gradient(
    60deg,
    rgba(black, 0.5) 60%,
    transparent 60%
  );
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.example24 {
  border: 1px solid red;
  background-image: repeating-radial-gradient(
    #2a2928 0 4px,
    #ada9a0 5px,
    #2a2928 6px
  );
}

.example25 {
  border: 1px solid red;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px #fc9;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px red, inset 0 0 0 20px red;
    background: #ace;
  }
}

@keyframes rotate-loop {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.example26 {
  animation: rotate-loop 5s linear infinite;
  border: 1px solid red;
  background-image: linear-gradient(
      30deg,
      transparent 40%,
      rgba(black, 0.5) 40%
    ), linear-gradient(60deg, rgba(black, 0.5) 60%, transparent 60%),
    repeating-radial-gradient(#2a2928 0 4px, #ada9a0 5px, #2a2928 6px);
  background-repeat: no-repeat no-repeat;
  background-size: 50% 100%, 100% 50%, 100% 100%;
  background-position: 100% 0, 0 100%, 0, 0;
  border-radius: 50%;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px #fc9;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px red, inset 0 0 0 20px red;
    background: #ace;
  }
}

在 src/index.js 中导入样式文件

// import './style/01-linear-gradient.scss'
import "./style/02-radial-gradient.scss";

最后，我们把 index.html 复制保存到 src/html/02-radial-gradient.html