div+css布局实现精灵球效果代码-html代码-BFW代码库

div+css布局实现精灵球效果代码

代码语言：html

代码描述：div+css布局实现精灵球效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ball-size: 60vmin;
  --btn-size: calc(var(--ball-size) * .38);
  --stripe-height: calc(var(--ball-size) * .06);
  --shadow-width: calc(var(--ball-size) / 10);
  --shadow-color: rgba(0,0,0,.075);
  --bg-color: #2196f3;
  --bg-color2: #0b77cd;
}

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-image: linear-gradient(to bottom, var(--bg-color) 55%, var(--bg-color2));
/*   background-image: repeating-linear-gradient(
      transparent,
      transparent 24%,
      var(--bg-color) 24%,
      var(--bg-color) 26%,
      transparent 26%,
      transparent 74%,
      var(--bg-color) 74%,
      var(--bg-color) 76%,
      transparent 76%
    ),
    radial-gradient(
      circle at 25% 25%,
      var(--bg-color) 6%,
      transparent 6.5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 25% 25%,
      var(--bg-color2) 20%,
      transparent 21%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 75%,
      var(--bg-color) 6%,
      transparent 6.5%,
      transparent 100%
    ),
    radial-gradient(circle at 75% 75%, var(--bg-color2) 20%, transparent 21%); */
  background-color: var(--bg-color);
/*   background-size: 10rem 10rem; */
}

.ball {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
}

.top {
  height: calc(var(--ball-size) / 2 - (var(--stripe-height) / 2));
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  background: red;
  box-shadow: var(--shadow-w.........完整代码请登录后点击上方下载按钮下载查看