radial-gradient径向渐变实现球体

2020-03-16 本文已影响0人葶寳寳

径向渐变radial-gradient(shape size at position, start-color, ... , end-color)

shape：确定圆的类型。默认为椭圆形ellipse，也可设置为圆形circle。可通过at指定起始点位置。
size：定义渐变的大小，指定径向渐变的半径长度。默认为farthest-corner从圆心到离圆心最远的角；closest-side从圆心到离圆心最近的边；farthest-side、closest-corner。
position：定义渐变的位置。与background-position 或者transform-origin类似。如缺省，默认为中心点。

1.渐变的起始位置，默认为中心点：

.radial-gradient{
  width: 200px;
  height: 100px;
  background: radial-gradient(circle, red, green, rgba(43,130,255,0.4));
}

image.png

使用at设置渐变的起始位置。以左上角作为坐标原点。

.radial-gradient{
  width: 200px;
  height: 100px;
  background: radial-gradient(circle at 50px 50px, red, green, rgba(43,130,255,0.4));
}

image.png

也可用%设置

.radial-gradient{
  width: 200px;
  height: 100px;
  background: radial-gradient(circle at 30% 50%, red, green, rgba(43,130,255,0.4));
}

image.png

2.指定渐变颜色断点。默认颜色是均匀分布在0 - 100%区域的。

background: radial-gradient(circle, red, green, blue, red);

0 - 25%: red; 25% - 50%: green; 50% - 75%: blue; 75% - 100%: red;

颜色均匀分布

设置断点后的效果。

  background: radial-gradient(circle, red, green 10%, blue 40%, red);

0 - 10%: red; 10% - 40%: green; 40% - 100%: 均匀的分布 bule 和 red

按设置的断点分布.png

🌰

下边是使用径向渐变radial-gradient来实现的。

<div class="radial-gradient"></div>

.radial-gradient{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
}

先设置圆的背景色渐变，设置了渐变的起始位置，渐变的颜色。

渐变背景色.png

然后通过伪类给圆的右上角再次设置白色的渐变背景色，使视觉效果更立体。（具怎么设置取决于设计）

.radial-gradient:before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 180% -100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}

右上角设置渐变

同样，给左下角设置渐变。（取决于设计）

.radial-gradient:after {
  top: 0;
  width: 180px;
  height: 180px;
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 10% 190%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}

径向渐变实现的球体.png

下边是给球体加了动画：

<div class="radial-gradient1"></div>
<div class="radial-gradient2"></div>

.radial-gradient1{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
  animation: bubble-anim 5s linear infinite
}

@keyframes bubble-anim{
  0% {top: 0; left: 5%}
  10% {top: 10%; left: 10%}
  20% {top: 20%; left: 15%}
  30% {top: 30%; left: 20%}
  40% {top: 40%}
  50% {top: 50%}
  60% {top: 60%}
  70% {top: 70%}
  80% {top: 80%}
  90% {top: 90%}
  100% {top: 100%; left: 30%}
}

.radial-gradient1:before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 180% -100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
} 

.radial-gradient1:after {
  top: 0;
  width: 180px;
  height: 180px;
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 10% 190%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}

.radial-gradient2{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
  animation: bubble-anim2 5s linear infinite
}

@keyframes bubble-anim2{
  0% {bottom: 0}
  10% {bottom: 10%; left: 10%}
  20% {bottom: 20%; left: 20%}
  30% {bottom: 30%; left: 30%}
  40% {bottom: 45%; left: 40%}
  50% {bottom: 50%; left: 50%}
  60% {bottom: 65%; left: 60%}
  70% {bottom: 75%; left: 70%}
  80% {bottom: 80%}
  90% {bottom: 90%}
  100% {bottom: 100%; left: 50%}
}

.radial-gradient2:before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 10% -120%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
} 

.radial-gradient2:after {
  top: 0;
  width: 180px;
  height: 180px;
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 180% 100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}

练习：
径向渐变实现内陷半圆：

div {
    width: 520px;
    height: 172px;
    background: #58a;
    background: radial-gradient(circle at 500px 0, transparent 15px, #58a 16px) center top,
    radial-gradient(circle at 500px 86px, transparent 15px, #58a 16px) center bottom ;
    background-size: 100% 50%; 
    background-repeat: no-repeat;    
}

image.png

参考文章：
你想不到的！CSS 实现的各种球体效果【附在线演示】
10个demo示例学会CSS3 radial-gradient径向渐变

radial-gradient径向渐变实现球体

🌰

猜你喜欢

热点阅读