TASAWUR教育平台

标题: html5 月食代码 [打印本页]

作者: Ali 时间: 2021-11-19 13:10
标题: html5 月食代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  *, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
      box-sizing:border-box;
}
html,
body {
  width:100%;
  height:100%;
}
body {
  position:relative;
  background-color:#011111;
  background-image:radial-gradient(#0d292a 0%, #011111 70%);
  background-size:100% 600px;
  background-repeat:no-repeat;
}
.moon {
  position:absolute;
  top:200px;
  left:50%;
  width:8rem;
  height:8rem;
  overflow:hidden;
  border-radius:50%;
  -webkit-transform:translateX(-50%);
      transform:translateX(-50%);
  -webkit-box-shadow:0 0 400px 100px #123839;
      box-shadow:0 0 400px 100px #123839;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.moon:after {
  content:'';
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:1px;
  z-index:-1;
  border-radius:50%;
  background-color:#fff5bb;
  background-image:
radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%);
  background-size:10px 10px, 5px 5px, 15px 15px, 10px 10px, 7px 7px;
  background-repeat:no-repeat;
  background-position:10% 20%, 70% 15%, 35% 70%, 80% 50%, 70% 75%;
-webkit-box-shadow:inset -15px -15px 0 #f2e594;
         box-shadow:inset -15px -15px 0 #f2e594;
}
.moon:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:222;
  background:#0b2526;
  border-radius:50%;
  -webkit-transform:translateX(-100%);
      transform:translateX(-100%);
  -webkit-animation:phase 20s infinite linear;
      animation:phase 20s infinite linear;
}
@-webkit-keyframes phase {
  0%, 100% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  10% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  99.999% {-webkit-transform:translateX(100%);transform:translateX(100%);}
}
@keyframes phase {
  0%, 100% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  10% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  99.999% {-webkit-transform:translateX(100%);transform:translateX(100%);}
}
  </style>
</HEAD>

<BODY>
  <div class="moon"></div>
</BODY>
</HTML>

欢迎光临 TASAWUR教育平台 (https://tasawur.cn/)