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;
      }
    }
  • 相关阅读:
    linux-满足多字符条件统计行数
    oracle的面试问题
    在开发过程中为什么需要写存储过程
    面向对象编程
    动态SQL
    触发器

    子程序
    游标
    集合
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10627883.html
Copyright © 2011-2022 走看看