search

mowatermelon / Use-iceWorks

使用Iceworks的案例代码
1 stars 0 forks source link

css代码学习 #15

Open mowatermelon opened 6 years ago

mowatermelon commented 6 years ago 
.rc-tooltip.rc-tooltip-zoom-enter,.rc-tooltip.rc-tooltip-zoom-leave {
    display: block
}

.rc-tooltip-zoom-appear,.rc-tooltip-zoom-enter {
    opacity: 0;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: cubic-bezier(.18,.89,.32,1.28);
    animation-timing-function: cubic-bezier(.18,.89,.32,1.28);
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.rc-tooltip-zoom-leave {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: cubic-bezier(.6,-.3,.74,.05);
    animation-timing-function: cubic-bezier(.6,-.3,.74,.05);
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active,.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active {
    -webkit-animation-name: rcToolTipZoomIn;
    animation-name: rcToolTipZoomIn;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
    -webkit-animation-name: rcToolTipZoomOut;
    animation-name: rcToolTipZoomOut;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

@-webkit-keyframes rcToolTipZoomIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0,0);
        transform: scale(0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }
}

@keyframes rcToolTipZoomIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0,0);
        transform: scale(0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }
}

@-webkit-keyframes rcToolTipZoomOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0,0);
        transform: scale(0,0)
    }
}

@keyframes rcToolTipZoomOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0,0);
        transform: scale(0,0)
    }
}
mowatermelon commented 6 years ago 
.ice-loading-pacman.ice-loading-medium>div:nth-child(3),.ice-loading-pacman.ice-loading-medium>div:nth-child(4),.ice-loading-pacman.ice-loading-medium>div:nth-child(5),.ice-loading-pacman.ice-loading-medium>div:nth-child(6) {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0,-5px);
    -ms-transform: translate(0,-5px);
    transform: translate(0,-5px);
    top: 20px;
    left: 60px
}

.ice-loading-pacman.ice-loading-small {
    position: relative;
    width: 110px
}

.ice-loading-pacman.ice-loading-small>div:nth-child(2) {
    -webkit-animation: pacman-balls-small 1s -.99s infinite linear;
    animation: pacman-balls-small 1s -.99s infinite linear
}

.ice-loading-pacman.ice-loading-small>div:nth-child(3) {
    -webkit-animation: pacman-balls-small 1s -.66s infinite linear;
    animation: pacman-balls-small 1s -.66s infinite linear
}

.ice-loading-pacman.ice-loading-small>div:nth-child(4) {
    -webkit-animation: pacman-balls-small 1s -.33s infinite linear;
    animation: pacman-balls-small 1s -.33s infinite linear
}

.ice-loading-pacman.ice-loading-small>div:nth-child(5) {
    -webkit-animation: pacman-balls-small 1s 0s infinite linear;
    animation: pacman-balls-small 1s 0s infinite linear
}

.ice-loading-pacman.ice-loading-small>div:first-of-type {
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
    border-left: 15px solid #fff;
    border-bottom: 15px solid #fff;
    border-radius: 15px;
    -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
    animation: rotate_pacman_half_up .5s 0s infinite;
    position: relative;
    left: -30px
}

.ice-loading-pacman.ice-loading-small>div:nth-child(2) {
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
    border-left: 15px solid #fff;
    border-bottom: 15px solid #fff;
    border-radius: 15px;
    -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
    animation: rotate_pacman_half_down .5s 0s infinite;
    margin-top: -30px;
    position: relative;
    left: -30px
}

.ice-loading-pacman.ice-loading-small>div:nth-child(3),.ice-loading-pacman.ice-loading-small>div:nth-child(4),.ice-loading-pacman.ice-loading-small>div:nth-child(5),.ice-loading-pacman.ice-loading-small>div:nth-child(6) {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0,-3.75px);
    -ms-transform: translate(0,-3.75px);
    transform: translate(0,-3.75px);
    top: 15px;
    left: 45px
}
mowatermelon commented 6 years ago

之前都怎么见过这个写法

@-moz-document url-prefix() {
@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))) {
        .next-icon::before{margin-top:-5px}
}}
mowatermelon commented 6 years ago 
@import '~@icedesign/skin/variables.scss';

// Basic color variables
$custom-layout-bg: #fafafa;

// Layout light styles
$ice-body-bg: $color-white !default;
$ice-layout-bg: $custom-layout-bg !default;
$ice-toggle-btn-bg: $color-brand1-5 !default;
$ice-toggle-btn-text-color: $color-white !default;
$ice-logo-text-color: $color-brand1-5 !default;
$ice-icon-down-color: $color-text1-3 !default;

$ice-header-menu-bg: transparent !default;
$ice-header-text-color: $color-text1-3 !default;
$ice-header-text-hover-color: $color-brand1-5 !default;

$ice-copyright-text-color: $color-text1-3 !default;
$ice-copyright-text-hover-color: $color-brand1-5 !default;

.ice-design-header-footer-layout-light.ice-design-layout {
  background-image: url(https://img.alicdn.com/tfs/TB1GsHCd8fH8KJjy1XbXXbLdXXa-1680-370.png);
}

$theme: 'light';

.ice-design-header-footer-layout-#{$theme} {
  .logo {
    max-width: 340px;
    height: 42px;
    line-height: 42px;
    .logo-text {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 36px;
      color: $ice-logo-text-color;
      font-weight: bold;
      font-family: Helvetica, sans-serif;
    }
  }

  /* LAYOUT */
  &.ice-design-layout {
    width: 100%;
    min-width: $page-container-width;
    padding: 0 20px;
    background-color: $ice-layout-bg;
    background-size: 100%;
    background-repeat: no-repeat;
    .ice-design-layout-body {
      width: $page-container-width;
      margin: 0 auto;
    }
    .ice-design-layout-content {
      margin-left: -12px;
      margin-right: -12px;
    }

    /* HEADER */
    .ice-design-layout-header {
      width: $page-container-width;
      padding: 20px 0;
      margin: 0px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: none;
      background: transparent;
      .user-avatar {
        margin-right: 12px;
        border-radius: 4px;
      }
      .ice-design-layout-header-menu .ice-menu {
        background: $ice-header-menu-bg;
        color: $ice-header-text-color;
        .ice-menu-item:hover,
        .ice-menu-item > a:hover {
          color: $ice-header-text-hover-color;
        }
      }
      .ice-design-header-userpannel {
        margin-left: 20px;
        cursor: pointer;
        .user-profile {
          display: inline-block;
          text-align: center;
          margin-bottom: 2px;
          color: $ice-header-text-color;
        }
        .icon-down {
          margin-left: 2px;
          color: $ice-icon-down-color;
        }
      }
    }

    /* MAIN */
    .ice-layout-main {
      padding: 0;
      overflow: hidden;
    }

    /* FOOTER */
    .ice-design-layout-footer {
      width: $page-container-width;
      margin: 0 auto;
    }
    .ice-design-layout-footer-body {
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .copyright {
        color: $ice-copyright-text-color;
        line-height: 1.5;
        font-size: 12px;
        text-align: left;
      }
      .copyright-link {
        color: $ice-copyright-text-color;
        &:hover {
          color: $ice-copyright-text-hover-color;
          text-decoration: none;
        }
      }
    }
  }
}