5.HTML+CSS制作一颗流星-CSDN博客

效果地址：https://codepen.io/flyingliao/pen/pBzKbZ

HTML code：

<div class="sky">
  <span></span>
</div>

CSS code：

html,body{
  margin: 0;
  padding: 0;
}
*{
  /* 设置所有元素的width、height包括内边距、边框、内容区 */
  box-sizing: border-box;
}
/* 设置body的子元素水平垂直居中 */
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}
.sky{
  width: 50vh;
  height: 50vh;
  /* 超出sky的部分隐藏 */
  overflow: hidden;
}
/* 设置sky的子元素全部倾斜45度 */
.sky > * {
  transform: rotate(45deg);
}
/* 流星的样式 */
.sky span{
  display: block;
  width: 10vh;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: white black black black;
  margin-top: -6vh;
  margin-left: -6vh;
  animation: shooting 1s linear 1s infinite;
}
@keyframes shooting{
  to{
    margin: 50vh;
  }
}