zoukankan      html  css  js  c++  java
  • css 实现盒子边框炫酷流动动画效果

    效果

     

    1.html

    在盒子里面增加四个span标签

    <div class="login_form">
          <span class="light"></span><span class="light"></span><span class="light"></span><span class="light"></span>
    ...
    </div>

    2.css

    .login_form {position: absolute;}// 自定义盒子宽高
    .light {
          position: absolute;
          display: block;
        }
        .light:nth-child(1) {
          filter: hue-rotate(0deg);
          top: 0;
          left: 0;
           100%;
          height: 3px;
          background: linear-gradient(90deg, transparent, #3a86ff);
          animation: animate1 8s linear infinite;
        }
    
        @keyframes animate1 {
          0% {
            left: -100%;
          }
    
          50%,
          100% {
            left: 100%;
          }
        }
        .light:nth-child(2) {
          filter: hue-rotate(60deg);
          top: -100%;
          right: 0;
           3px;
          height: 100%;
          background: linear-gradient(180deg, transparent, #3a86ff);
          animation: animate2 8s linear infinite;
          animation-delay: 2s;
        }
    
        @keyframes animate2 {
          0% {
            top: -100%;
          }
    
          50%,
          100% {
            top: 100%;
          }
        }
        .light:nth-child(3) {
          filter: hue-rotate(120deg);
          bottom: 0;
          right: 0;
           100%;
          background: linear-gradient(270deg, transparent, #3a86ff);
          animation: animate3 8s linear infinite;
          animation-delay: 4s;
        }
    
        @keyframes animate3 {
          0% {
            right: -100%;
            height: 3px;
          }
    
          50%,
          100% {
            height: 2px;
            right: 100%;
          }
        }
        .light:nth-child(4) {
          filter: hue-rotate(300deg);
          bottom: -100%;
          left: 0;
           3px;
          height: 100%;
          background: linear-gradient(360deg, transparent, #3a86ff);
          animation: animate4 8s linear infinite;
          animation-delay: 6s;
        }
    
        @keyframes animate4 {
          0% {
            bottom: -100%;
          }
    
          50%,
          100% {
            bottom: 100%;
          }
        }
      }

     

  • 相关阅读:
    poj3669 广搜
    检索所有课程都选修的的学生的学号与姓名
    UVA10160 Servicing Stations
    uva11205 The broken pedometer 子集生成
    poj1101 the game 广搜
    poj3009 Curling 2.0 深搜
    poj 1564 Sum It Up 搜索
    HDU 2268 How To Use The Car (数学题)
    codeforces 467C George and Job(简单dp,看了题解抄一遍)
    HDU 2267 How Many People Can Survive(广搜,简单)
  • 原文地址:https://www.cnblogs.com/chichuan/p/14096931.html
Copyright © 2011-2022 走看看