案例实现思路

使用弹性布局实现总体布局
使用动画+clip-path实现边框旋转的效果
使用filter+动画+伪元素实现流光效果

具体实现过程

Html

    <div class="sign_up">
      <h1>登录</h1>
      <form action="#" method="get" class="sign">
        <label>
          <img src="../A5/账号.png" />
          <input type="text" required onfocus="onfocus" placeholder="账号" />
        </label>
        <label
          ><img src="../A5/密码.png" />
          <input type="password" required placeholder="密码" />
        </label>
        <button class="button">登录</button>
        <span>如果忘记密码，请点击<a>注册</a></span>
      </form>
    </div>

分析思路

在该过程中我们可以搭建具体框架，形成案例骨架；在其中我们使用的有一些html5特有的标签

在这required是必填的意思，防止用户不填数据，页面也实现跳转，
placeholder="账号"，这是告诉用户这里要填写什么东西。

css解析

实现弹性布局

    display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

弹性布局是现在前端较为流行的布局方式，我们在这使用的方向（ flex-direction）是纵向默认为从上到下，他还用横向(row)默认从左到右，令两个属性为 column-reverse,row-reverse是他们的反方向。
justify-content: space-around;这是去实现方向上所有空间的平分。
align-items: center;去管理侧面的元素

动画+clip-path

动画

在上几篇文章中细讲过，现在就过一下；动画的简写 /* animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态 */

 animation: myfirst 5s linear 2s infinite alternate;

重点clip-path

这是一个好玩的css属性他是属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏也就是说可以用它做各种样式的前端图形，它可以裁剪他，在控制他的显示与隐藏。

@keyframes move1{
        0%{
            clip-path: inset(0 30% 70% 0);
        }
        25%{
            clip-path: inset(30% 70% 0 0);
        }
        50%{
            clip-path: inset(70% 0 0 30%);
        }
        100%{
            clip-path: inset(0 0 30% 70%);
        }
      }

我们使用的 clip-path: inset语法为 clip-path: inset（上，右，下，左），里面写px或%都可以，我们在实现动画和循环就可以实现这个效果了。

登录1.1.gif

结语

在最后为大家提供两者图

密码.png

账号.png 流光效果较多也最好玩，就下次再说了

html+css实现精美的登录界面