css布局实现全月和流星效果-html代码-BFW代码库

代码语言：html

代码描述：css布局实现全月和流星效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700">
<style>
/* Utils */
/* Style */
body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Roboto, sans-serif;
}

.container {
  width: 500px;
  height: 500px;
  position: relative;
  border-radius: 50%;
  background-color: #251f31;
  overflow: hidden;
  z-index: -100;
  border: 20px solid white;
  box-shadow: 0 8px 20px rgba(74, 40, 126, 0.2);
}
.container *,
.container *:before,
.container *:after {
  position: absolute;
  box-sizing: border-box;
}

.moon {
  width: 250px;
  height: 250px;
  z-index: 4;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  background-color: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.moon .carter {
  width: 70px;
  height: 70px;
  background-color: #f0f0e3;
  border-radius: 50%;
  left: 60%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.moon .carter.second {
  width: 27px;
  height: 27px;
  left: 84%;
  top: 55%;
  z-index: 2;
}
.moon .carter.third {
  width: 40px;
  height: 40px;
  left: 65%;
  top: 75%;
  z-index: 1;
}
.moon .moon-halo:after, .moon .moon-halo:before {
  content: '';
  display: inline-block;
}
.moon .moon-halo, .moon .moon-halo:after, .moon .moon-halo:before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  opacity: 0.2;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transform-origin: 0 0;
  animation: shine 1s ease-in-out infinite alternate;
}
.moon .moon-halo:before {
  width: 350px;
  height: 350px;
  animation-delay: 200ms;
}
.moon .moon-halo:after {
  width: 400px;
  height: 400px;
  animation-delay: 400ms;
}

.meteors {
  z-index: -10;
  width: 100%;
  height: 100%;
}
.meteors .meteor {
  width: 0;
  height: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-right: 90px solid #fff;
  border-image: linear-gradient(to left, #fff, transparent) 1 100%;
  border-radius: 0 2px 2px 0;
  transform: rotate(30deg);
  position: absolute;
  top: 23%;
  left: 70%;
  opacity: 0;
  animation: shooting 4s linear infinite;
  animation-delay: 1s;
}
.meteors .meteor:nth-child(2) {
  top: 13%;
  left: 64%;
  border-right-width: 80px;
  animation-delay: 2s;
}
.meteors .meteor:nth-child(3) {
  top: 23%;
  left: 62%;
  border-right-width: 50px;
  animation-delay: 2.5s;
}
.meteors .meteor:nth-child(4) {
  top: 64%;
  left: 72%;
  border-right-width: 50px;
  animation-delay: 1.3s;
}

.stars {
  z-index: -11;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 1em;
}
.stars .star {
  position: relative;
}
.stars .star:after, .stars .star:before {
  content: '';
  display: inline-block;
}
.stars .star, .stars .star:after, .stars .star:before {
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
}
.stars .star:nth-child(1) {
  opacity: 0.4664464727;
  transform: scale(0.3365964452);
}
.stars .star:nth-child(1):after {
  transform: translate(-91.6853986366px, -21.4593151053px) scale(0.7819942019);
}
.stars .star:nth-child(1):before {
  transform: translate(73.836103688px, 49.5665739923px) scale(0.4615147836);
}
.stars .star:nth-child(2) {
  opacity: 0.4604097475;
  transform: scale(0.7870266596);
}
.stars .star:nth-child(2):after {
  transform: translate(-68.5451755232px, -32.5744109575px) scale(0.8807927255);
}
.stars .star:nth-child(2):before {
  transform: translate(65.9720799016px, 37.1170651392px) scale(1.1974153891);
}
.stars .star:nth-child(3) {
  opacity: 0.9320211582;
  transform: scale(0.728256238);
}
.stars .star:nth-child(3):after {
  transform: translate(-33.0554437117px, -118.5476439943px) scale(1.1309327184);
}
.stars .star:nth-child(3):before {
  transform: translate(79.6611722511px, 47.99973375px) scale(0.4623613547);
}
.stars .star:nth-child(4) {
  opacity: 0.9711893831;
  transform: scale(1.0127931158);
}
.stars .star:nth-child(4):after {
  transform: translate(-98.2837718365px, -66.0767765271px) scale(0.035444328);
}
.stars .star:nth-child(4):before {
  transform: translate(22.9867571025px, 8.024736112px) scale(0.1107803745);
}
.stars .star:nth-child(5) {
  opacity: 0.3516275593;
  transform: scale(0.8910027817);
}
.stars .star:nth-child(5):after {
  transform: translate(-77.0661046783px, -48.7364324023px) scale(0.4427288715);
}
.stars .star:nth-child(5):before {
  transform: translate(73.6621739655px, 2.9329167943px) scale(0.9692156059);
}
.stars .star:nth-child(6) {
  opacity: 0.3035632526;
  transform: scale(0.301464347);
}
.stars .star:nth-child(6):after {
  transform: translate(-88.00806069px, -31.5543903371px) scale(0.8548342156);
}
.stars .star:nth-child(6):before {
  transform: translate(6.9576923917px, 50.5611474305px) scale(0.1924181249);
}
.stars .star:nth-child(7) {
  opacity: 0.629615251;
  transform: scale(0.6409687688);
}
.stars .star:nth-child(7):after {
  transform: translate(-66.2629230505px, -52.2844059578px) scale(0.0399291805);
}
.stars .star:nth-child(7):before {
  transform: translate(41.2202414665px, 0.1372864331px) scale(0.2751327423);
}
.stars .star:nth-child(8) {
  opacity: 0.1273511749;
  transform: scale(0.5594019573);
}
.stars .star:nth-child(8):after {
  transform: translate(-63.0227848249px, -82.4623210993px) scale(1.0098396856);
}
.stars .star:nth-child(8):before {
  transform: translate(59.6467772465px, 42.8108845631px) scale(1.1589627547);
}
.stars .star:nth-child(9) {
  opacity: 1.0793807332;
  transform: scale(0.3696783739);
}
.stars .star:nth-child(9):after {
  transform: translate(-64.3469681845px, -89.937071091px) scale(0.4881287454);
}
.stars .star:nth-child(9):before {
  transform: translate(18.7731189862px, 30.9926507497px) scale(0.1740415169);
}
.stars .star:nth-child(10) {
  opacity: 0.1068214142;
  transform: scale(0.1984135228);
}
.stars .star:nth-child(10):after {
  transform: translate(-70.9681275577px, -61.7627898623px) scale(0.8139113451);
}
.stars .star:nth-child(10):before {
  transform: translate(27.3765823821px, 45.5278624841px) scale(0.6798068349);
}
.stars .star:nth-child(11) {
  opacity: 0.9735173629;
  transform: scale(0.3492102217);
}
.stars .star:nth-child(11):after {
  transform: translate(-62.8938202466px, -63.4057396988px) scale(0.3575842433);
}
.stars .star:nth-child(11):before {
  transform: translate(49.4779408496px, 16.0166092902px) scale(1.1579956512);
}
.stars .star:nth-child(12) {
  opacity: 0.8713079549;
  transform: scale(0.8324870672);
}
.stars .star:nth-child(12):after {
  transform: translate(-48.3765040391px, -107.731202202px) scale(0.0584337494);
}
.stars .star:nth-child(12):before {
  transform: translate(23.2206477138px, 39.6886626015px) scale(0.2745092038);
}
.stars .star:nth-child(13) {
  opacity: 0.9773391578;
  transform: scale(1.0416953927);
}
.stars .star:nth-child(13):after {
  transform: translate(-72.6734200276px, -14.8726820219px) scale(1.0641483629);
}
.stars .star:nth-child(13):before {
  transform: translate(13.8990923092px, 29.0434654617px) scale(0.7592503868);
}
.stars .star:nth-child(14) {
  opacity: 0.764.........完整代码请登录后点击上方下载按钮下载查看