常用ui

Posted 2020-10-01 fengnovo

       /*最外层布局*/
        .wrap{
            width: 52px;
            height: 52px;
            animation: animation-wrap 2.5s linear infinite;
        }
        /*外层布局*/
        .circle-layout{
            width: 52px;
            height: 52px;
            animation: animation-circle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*左div*/
        .layout-left{
            float: left;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*右div*/
        .layout-right{
            float: right;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*左圈*/
        .circle-left{
            position: absolute;
            top: 0;
            left: 0;
            width: 44px;
            height: 44px;
            border: 4px solid #F88E8B;
            border-radius: 50%;
            border-left: 4px solid transparent;
            border-bottom: 4px solid transparent;
            transform: rotate(40deg);
            animation: animation-circle-left 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*右圈*/
        .circle-right{
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
            border: 4px solid #F88E8B;
            border-radius: 50%;
            border-right: 4px solid transparent;
            border-top: 4px solid transparent;
            transform: rotate(-310deg);
            animation: animation-circle-right 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        /*左圈动画*/
      @keyframes animation-circle-left{
          0%{
              transform: rotate(40deg);
          }
          50%{
              transform: rotate(-100deg);
          }
          100%{
              transform: rotate(40deg);
          }
      }
      /*右圈动画*/
      @keyframes animation-circle-right{
          0%{
              transform: rotate(-310deg);
          }
          50%{
              transform: rotate(-170deg);
          }
          100%{
              transform: rotate(-310deg);
          }
      }
      /*外层动画*/
      @keyframes animation-circle{
          0%{
              transform: rotate(0deg);
          }
          25%{
              transform: rotate(180deg);
          }
          50%{
              transform: rotate(360deg);
          }
          75%{
              transform: rotate(540deg);
          }
          100%{
              transform: rotate(720deg);
          }
      }
      /*最外层动画*/
      @keyframes animation-wrap{
          0%{
              transform: rotate(0deg);
          }
          100%{
              transform: rotate(360deg);
          }
      }

　

 

toast js代码

 function toastIt(text, timeout, options) {
      timeout = timeout || 3000;

      var toast = document.createElement(\'DIV\');
      toast.classList.add(\'toast-it\');
      var content = document.createTextNode(text);
      toast.appendChild(content);

      toast.style.animationDuration = timeout / 1000 + \'s\';
   
      for (var prop in options) {
          toast.style[prop] = options[prop];
      }
   
      document.body.appendChild(toast);
      setTimeout(function(){
          document.body.removeChild(toast);
      }, timeout);
  }

toast css代码

    .toast-it {
        z-index: 10001;
        background-color: #555555;
        color: #F4F4F4;
        padding: 3px 20px;
        border-radius: 20px;
        text-align: center;
        position: fixed;
        /* center horizontally */
        top: 80%;
        left: 50%;
        transform: translate(-50%, -80%);
     
        animation-name: TOAST-APPEAR;
        animation-timing-function: ease-in;
        animation-duration: 3s;
    }

    @keyframes TOAST-APPEAR {
        0% {
            opacity: 0;
        }
        15% {
            opacity: 1;
        }
        80% {
            opacity: 1;
            top: 80%;
        }
        100% {
            opacity: 0;
            top: 75%;
        }
    }

　　

在线预览：https://fengnovo.github.io/demo/simpleUi/

参考：http://www.jianshu.com/p/9649dbc1c9af
　　   http://blog.csdn.net/wyk304443164/article/details/72896623