css 渐变、圆角、制作球体、气泡动画

css 渐变、圆角、制作球体、气泡动画

制作一个球体

1. 制作一个基本图形圆

// 基本图形
<figure class="circle"></figure>

// css
.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
}
复制代码

2.为圆添加径向渐变

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}
复制代码

3. 至此已经创建了一个看起来像3d的球体，近进一步美化，使他更好看一些。

3D&阴影

• 根据应用于曲面的着色阴影，可以创建不同的外观。首先，让我们设置一个场景来放球。

<!--html-->
<section class="stage">
  <figure class="ball"><span class="shadow"></span></figure>
</section>

<!--css-->
.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.ball {
  display: block;
  background: black;
  margin: 0;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}

.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}
复制代码

利用伪类元素在曲面上着色

<!--html结构-->
<section class="stage">
  <figure class="ball"><span class="shadow"></span></figure>
</section>

<!--css-->
.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%,  #323232, #0a0a0a 80%, #000000 100%);
}

.ball:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%,  rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  -webkit-filter: blur(5px);
  z-index: 2;
}

.ball:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 5%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,  rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

.ball .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    transform: rotateX(90deg) translateZ(-150px);     
    z-index: -1;
}

.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
复制代码

气泡动画

<!--html-->
<section class="stage">
      <figure class="ball bubble"></figure>
</section>

<!--css-->
  <style>
    .ball {
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      position: relative;
      background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
    }

    .ball:before {
      content: "";
      position: absolute;
      top: 1%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 100%;
      background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
      -webkit-filter: blur(5px);
      filter: blur(5px);
      z-index: 2;
    }

    .ball:after {
      content: "";
      position: absolute;
      display: none;
      top: 5%;
      left: 10%;
      width: 80%;
      height: 80%;
      border-radius: 100%;
      -webkit-filter: blur(1px);
      filter: blur(1px);
      z-index: 2;
      transform: rotateZ(-30deg);
    }

    .ball .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
      -webkit-transform: rotateX(90deg) translateZ(-160px);
      transform: rotateX(90deg) translateZ(-160px);
      z-index: 1;
    }

    .ball.bubble {
      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));
      -webkit-animation: bubble-anim 2s ease-out infinite;
      animation: bubble-anim 2s ease-out infinite;
    }

    .ball.bubble:before {
      -webkit-filter: blur(0);
      filter: blur(0);
      height: 80%;
      width: 40%;
      background: radial-gradient(circle at 130% 130%, 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%);
      -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
      transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
    }

    .ball.bubble:after {
      display: block;
      background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
    }

    .stage {
      width: 300px;
      height: 300px;
      display: inline-block;
      margin: 20px;
      -webkit-perspective: 1200px;
      -moz-perspective: 1200px;
      -ms-perspective: 1200px;
      -o-perspective: 1200px;
      perspective: 1200px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
      -o-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
    }

    @keyframes bubble-anim {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }

      20% {
        -webkit-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05);
      }

      48% {
        -webkit-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9);
      }

      68% {
        -webkit-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02);
      }

      80% {
        -webkit-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98);
      }

      97%,
      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
  </style>
复制代码

眼睛动画

<!--html结构-->
<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="iris"></span>
  </figure>
</section>

<!--css-->
 <style>
    .ball {
      display: inline-block;
      width: 100%;
      height: 100%;
      margin: 0;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 66%, #9b5050 100%);
    }

    .ball:after {
      content: "";
      position: absolute;
      top: 5%;
      left: 10%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255,
        255, 0) 24%);
      transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    }

    .iris {
      width: 40%;
      height: 40%;
      margin: 30%;
      border-radius: 100%;
      background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
      transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
      position: absolute;
      animation: move-eye-skew 5s ease-out infinite;
    }

    .iris:before {
      content: "";
      display: block;
      position: absolute;
      width: 37.5%;
      height: 37.5%;
      border-radius: 100%;
      top: 31.25%;
      left: 31.25%;
      background: black;
    }

    .iris:after {
      content: "";
      display: block;
      position: absolute;
      width: 31.25%;
      height: 31.25%;
      border-radius: 100%;
      top: 18.75%;
      left: 18.75%;
      background: rgba(255, 255, 255, 0.2);
    }

    .ball .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
      transform: rotateX(90deg) translateZ(-150px);
      z-index: -1;
    }

    .stage {
      width: 300px;
      height: 300px;
      display: inline-block;
      margin: 20px;
      perspective: 1200px;
      perspective-origin: 50% 50%;
    }

    @keyframes move-eye-skew {
      0% {
        transform: none;
      }

      20% {
        transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
      }

      25%,
      44% {
        transform: none;
      }

      50%,
      60% {
        transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
      }

      66%,
      100% {
        transform: none;
      }
    }
  </style>
复制代码

地球仪

• 利用一张平铺的世界地图作为背景图片，通过图片不断改变background-position位置

<!--html-->
<section class="stage">
  <figure class="ball">
    <span class="shadow">
    </span>
  </figure>
</section>

<!--css-->
 <style>
    .ball {
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      position: relative;
      background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
    }

    .ball:before {
      content: "";
      position: absolute;
      top: 1%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 100%;
      background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
      -webkit-filter: blur(5px);
      filter: blur(5px);
      z-index: 2;
    }

    .ball:after {
      content: "";
      position: absolute;
      display: none;
      top: 5%;
      left: 10%;
      width: 80%;
      height: 80%;
      border-radius: 100%;
      -webkit-filter: blur(1px);
      filter: blur(1px);
      z-index: 2;
      transform: rotateZ(-30deg);
    }

    .ball .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
      -webkit-transform: rotateX(90deg) translateZ(-160px);
      transform: rotateX(90deg) translateZ(-160px);
      z-index: 1;
    }

    .ball.bubble {
      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));
      -webkit-animation: bubble-anim 2s ease-out infinite;
      animation: bubble-anim 2s ease-out infinite;
    }

    .ball.bubble:before {
      -webkit-filter: blur(0);
      filter: blur(0);
      height: 80%;
      width: 40%;
      background: radial-gradient(circle at 130% 130%, 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%);
      -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
      transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
    }

    .ball.bubble:after {
      display: block;
      background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
    }

    .stage {
      width: 300px;
      height: 300px;
      display: inline-block;
      margin: 20px;
      -webkit-perspective: 1200px;
      -moz-perspective: 1200px;
      -ms-perspective: 1200px;
      -o-perspective: 1200px;
      perspective: 1200px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
      -o-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
    }

    @keyframes bubble-anim {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }

      20% {
        -webkit-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05);
      }

      48% {
        -webkit-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9);
      }

      68% {
        -webkit-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02);
      }

      80% {
        -webkit-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98);
      }

      97%,
      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
</style>
    
    
复制代码

参考链接

• css 渐变、圆角、制作球体、气泡动画详解
• 张鑫旭-线性渐变解释
• 张鑫旭-径向渐变解释
• radial-gradient解析
• codepen.io-气泡
• codepen.io-地球仪
• codepen.io-眼睛动画