zoukankan      html  css  js  c++  java
  • 5.HTML+CSS制作一颗流星

    效果地址: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;
      }
    }
  • 相关阅读:
    书_Delphi
    20160226
    SVG_style_script
    辅助
    电影_Z
    Windows下软件调试
    20160221
    Qt5.3.2_vs10_发布时所需DLL的路径
    android intent 传数据
    android 消息机制
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10627883.html
Copyright © 2011-2022 走看看