分享一款css3手撸特效登录页面-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

效果

主源码文件

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <style>
      html,body{
        height:100%
      }
      body {
        position: relative;
        -webkit-perspective: 800px;
        background-image: url(img/timg.jpeg);
        background-size: 100% 100%;
      }
      
      .content {
        width: 100%;
        height:100%;
        display:flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
      }
      .gonggao{
        animation: gonggao-entry 2.5s ease-in-out;
        position: absolute;
        right:40px;
        top:20px;
        width:250px;
        height:300px;
        background: #111;
        background: linear-gradient(#004746, #111111);
        border: 6px solid #00a4a2;
        box-shadow: 0 0 15px #00fffd;
        border-radius: 5px;
        z-index: 4;
        transition: 1s all;
      }
       .gonggao>p{
           animation: logo-entry 3s ease-in-out;
          text-align: center;
         color: #00a4a2;
          font-size: 18px;
       }
      .login {
        opacity: .8;
        animation: form-entry 3s ease-in-out;
        background: #111;
        background: linear-gradient(#004746, #111111);
        border: 6px solid #00a4a2;
        box-shadow: 0 0 15px #00fffd;
        border-radius: 5px;
        height: 220px;
        margin: 0 auto;
        position: relative;
        z-index: 4;
        width: 500px;
        transition: 1s all;
      }
      
      .test1 {
        left: 100px;
      }
      
      .test {
        -webkit-transform: rotateX(70deg) scale(0.8);
        -webkit-filter: blur(1px);
        box-shadow: 0 20px 30px 3px rgba(0, 0, 0, .55);
        opacity: .6;
      }
      
      .login_title {
        animation: input-entry 3s ease-in-out;
        padding: 10px 0;
        text-align: center;
        font-size: 18px;
          color: #00a4a2;
      }
      
      .logo {
        position: absolute;
        left: 20px;
        top: 20px;
        animation: text-glow 2s ease-out infinite alternate ,logo-entry 4s ease-in;
        font-family: 'Ubuntu', sans-serif;
        color: #00a4a2;
        font-size: 40px;
        letter-spacing: 2px;
        font-weight: bold;
        text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 60px #000, 0 0 70px #000;
        top: 50px;
      }
      
      .logo:before {
        animation: before-glow 2s ease-out infinite alternate;
        border-left: 535px solid transparent;
        border-bottom: 10px solid #00a4a2;
        content: ' ';
        height: 0;
        position: absolute;
        right: -74px;
        top: -10px;
        width: 0;
      }
      
      .logo:after {
        animation: after-glow 2s ease-out infinite alternate;
        border-left: 100px solid transparent;
        border-top: 16px solid #00a4a2;
        content: ' ';
        height: 0;
        position: absolute;
        right: -85px;
        top: 24px;
        transform: rotate(-47deg);
        width: 0;
      }
      
      .bg {
        width: 100%;
        height:100%;
        display:flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
      }
      
      #circle1 {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: circle1 4s linear infinite, circle-entry 6s ease-in-out;
        background: #000;
        border-radius: 50%;
        border: 10px solid #00a4a2;
        box-shadow: 0 0 0 2px black, 0 0 0 6px #00fffc;
        height: 500px;
        width: 500px;
        overflow: hidden;
        opacity: 0.4;
        z-index: -3;
      }
      
      #inner-cirlce1 {
        box-sizing: border-box;
        background: #000;
        border-radius: 50%;
        border: 36px solid #00fffc;
        height: 460px;
        width: 460px;
        margin: 10px;
      }
      
      #inner-cirlce1:before {
        content: ' ';
        width: 240px;
        height: 480px;
        background: #000;
        position: absolute;
        top: 0;
        left: 0;
      }
      
      #inner-cirlce1:after {
        content: ' ';
        width: 480px;
        height: 240px;
        background: #000;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <div class="logo">
      pigx 最新全网spring cloud管理系统
    </div>
    <div class="gonggao">
      <p> 公告标题</p>
    </div>
    <div class="bg">
      <div id="circle1">
        <div id="inner-cirlce1"></div>
      </div>
      </div>
      <div class="content">
        <div class="login" id="login">
          <div class="login_title">
            欢迎登陆
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    //  var login = document.getElementById('login')
    //  setTimeout(function() {
    //    login.className += ' test';
    //  }, 500)
    //  setTimeout(function() {
    //    login.className += ' test1';
    //  }, 1200)
  </script>

</html>

动画效果css

  /* =========================================
Animation Keyframes
========================================= */
      @keyframes gonggao-entry{
      	  0% {
          opacity: 0;
          height:0;
        }
        100% {
          opacity: 1;
          height: 300px;
        }
      }
      @keyframes logo-entry {
        0% {
          opacity: 0;
        }
        80% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      
      @keyframes circle-entry {
        0% {
          opacity: 0;
        }
        20% {
          opacity: 0;
        }
        100% {
          opacity: 0.4;
        }
      }
      
      @keyframes input-entry {
        0% {
          opacity: 0;
        }
        90% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      
      @keyframes form-entry {
        0% {
          height: 0;
          width: 0;
          opacity: 0;
          padding: 0;
        }
        20% {
          height: 0;
          border: 1px solid #00a4a2;
          width: 0;
          opacity: 0;
          padding: 0;
        }
        40% {
          width: 0;
          height: 220px;
          border: 6px solid #00a4a2;
          opacity: 1;
          padding: 0;
        }
        100% {
          height: 220px;
          width: 500px;
        }
      }
      
      @keyframes box-glow {
        0% {
          border-color: #00b8b6;
          box-shadow: 0 0 5px rgba(0, 255, 253, 0.2), inset 0 0 5px rgba(0, 255, 253, 0.1), 0 2px 0 #000;
        }
        100% {
          border-color: #00fffc;
          box-shadow: 0 0 20px rgba(0, 255, 253, 0.6), inset 0 0 10px rgba(0, 255, 253, 0.4), 0 2px 0 #000;
        }
      }
      
      @keyframes text-glow {
        0% {
          color: #00a4a2;
          text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 60px #000, 0 0 70px #000;
        }
        100% {
          color: #00fffc;
          text-shadow: 0 0 20px rgba(0, 255, 253, 0.6), 0 0 10px rgba(0, 255, 253, 0.4), 0 2px 0 #000;
        }
      }
      
      @keyframes before-glow {
        0% {
          border-bottom: 10px solid #00a4a2;
        }
        100% {
          border-bottom: 10px solid #00fffc;
        }
      }
      
      @keyframes after-glow {
        0% {
          border-top: 16px solid #00a4a2;
        }
        100% {
          border-top: 16px solid #00fffc;
        }
      }
      
      @keyframes circle1 {
        0% {
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -moz-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

转载于:https://my.oschina.net/sunshineS/blog/1916667