Egg-loading

In this example below you will see how to do a Egg-loading with some HTML / CSS and Javascript

利用旋轉中心 不在正中間造成有環轉甩出的效果

Thumbnail
This awesome code was written by yuanyu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yuanyu ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Egg-loading</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="fixed-box">
  <div class="egg-shell">
    <div class="egg-yellow"></div>
  </div>
  <div class="ruler">
    <div class="mark">5</div>
    <div class="mark">10</div>
    <div class="mark">15</div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/yuanyu/egg-loading-VzWEma */
body {
  background-color: #539CD6;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixed-box {
  position: relative;
  min-height: 68vh;
  width: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.ruler {
  height: 1px;
  width: 50vw;
  background-color: #fff;
  position: relative;
}
.ruler:before {
  content: '';
  height: 1em;
  width: .3em;
  background: #fff;
  position: absolute;
  top: 0;
  color: #fff;
  box-shadow: 5vw 0px, 10vw 0px, 15vw 0px, 20vw 0px, 25vw 0px, 30vw 0px, 35vw 0px, 40vw 0px, 45vw 0px, 50vw 0px;
}
.ruler:after {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  left: -.35em;
  top: -1em;
  border-width: .5em;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  -webkit-animation: slider 3s ease-in-out alternate infinite;
          animation: slider 3s ease-in-out alternate infinite;
}
.ruler .mark {
  position: absolute;
  color: #fff;
  top: 1em;
}
.ruler .mark:nth-child(1) {
  left: -.25em;
}
.ruler .mark:nth-child(2) {
  left: 24vw;
}
.ruler .mark:last-child {
  left: 49vw;
}

.egg-shell {
  font-size: 30vh;
  margin: 0;
  padding: 0;
  height: 1em;
  width: 0.7em;
  border-radius: 60% 60% 55% 55%/ 70% 70% 45% 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #fff;
  -webkit-transform-origin: 50% 75%;
          transform-origin: 50% 75%;
  -webkit-animation: roll 1s linear infinite forwards;
          animation: roll 1s linear infinite forwards;
  box-sizing: border-box;
}
.egg-shell .egg-yellow {
  height: 0.4em;
  width: 0.4em;
  border-radius: 50%;
  background: #FCE62D;
  position: absolute;
  bottom: .05em;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  box-sizing: border-box;
  -webkit-animation: colorCh 1.5s linear infinite forwards;
          animation: colorCh 1.5s linear infinite forwards;
}

@-webkit-keyframes roll {
  33% {
    -webkit-transform: translateY(0.12em) rotate(120deg);
            transform: translateY(0.12em) rotate(120deg);
  }
  66% {
    -webkit-transform: translateY(-0.12em) rotate(240deg);
            transform: translateY(-0.12em) rotate(240deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes roll {
  33% {
    -webkit-transform: translateY(0.12em) rotate(120deg);
            transform: translateY(0.12em) rotate(120deg);
  }
  66% {
    -webkit-transform: translateY(-0.12em) rotate(240deg);
            transform: translateY(-0.12em) rotate(240deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes colorCh {
  0%,32.5% {
    background-color: #FCE62D;
  }
  33%,66.5% {
    background-color: #FCD22D;
  }
  67%, 100% {
    background-color: #FCE62D;
  }
}
@keyframes colorCh {
  0%,32.5% {
    background-color: #FCE62D;
  }
  33%,66.5% {
    background-color: #FCD22D;
  }
  67%, 100% {
    background-color: #FCE62D;
  }
}
@-webkit-keyframes slider {
  to {
    -webkit-transform: translatex(50vw);
            transform: translatex(50vw);
  }
}
@keyframes slider {
  to {
    -webkit-transform: translatex(50vw);
            transform: translatex(50vw);
  }
}

Comments