一些简单的应用

制作水纹特效

.radial-gradient {
  width: 200px; height: 100px;
  background: red;
  position: relative;
}
.radial-gradient:after {
  content: '';
  position: absolute;
  height: 10px;
  left:0 ; right: 0;
  bottom: -10px;
  background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px);
  background-size: 20px 10px;
}

制作唱片特效

来自 https://codepen.io/thebabydino/embed/HjJlL

.radial-gradient {
  position: relative;
  width: 262px; height: 262px;
  border-radius: 50%;
  background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
  background-size: 50% 100%, 100% 50%, 100% 100%;
}
.radial-gradient:after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -35px;
  border: solid 1px #d9a388;
  width: 68px; height: 68px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
  background: #b5ac9a;
  content: '';
}

制作镂空特效

.radial-gradient {
  width: 100px; height: 100px;
  border: 50px solid;
  border-image: radial-gradient(circle, #fff 50px, yellow 51px, red) 50 stretch;
}

制作调色板

.board {
  width: 200px;
  height: 200px;
  background:
    linear-gradient(36deg, #272b66 42.34%, transparent 42.34%),
    linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%),
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0,
    linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%,
    #43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  border-radius: 50%;
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress