冰淇淋加载动画

下载代码

html

css

分享到微信朋友圈

html

 
<div class="container">
  <div class="icecream">
    <div class="flavor">
      <div class="flavours"></div>
    </div>
    <div class="stick"></div>
  </div>
</div>

css

body,
html {
  height: 100%;
}

.container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #33485F;
}

.icecream > .flavor {
  position: relative;
  width: 190px;
  height: 260px;
  border-radius: 80px 80px 10px 10px;
  overflow: hidden;
}
.icecream > .flavor:after {
  content: '';
  position: absolute;
  left: 21px;
  bottom: 20px;
  width: 20px;
  height: 170px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
}

.icecream > .flavor > .flavours {
  position: relative;
  top: 0%;
  left: -20%;
  width: 140%;
  height: 120%;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #f63a99), color-stop(25%, #30dcf6), color-stop(25%, #30dcf6), color-stop(50%, #30dcf6), color-stop(50%, #f2d200), color-stop(50%, #f2d200), color-stop(75%, #f2d200), color-stop(75%, #70ca5c));
  background-image: linear-gradient(0deg, #f63a99 25%, #30dcf6 25%, #30dcf6 25%, #30dcf6 50%, #f2d200 50%, #f2d200 50%, #f2d200 75%, #70ca5c 75%);
  background-position: 0px 0px;
  background-repeat: repeat-y;
  -webkit-animation: flavours 5s linear infinite;
          animation: flavours 5s linear infinite;
  -webkit-transform: rotate(155deg);
          transform: rotate(155deg);
}

.icecream > .stick {
  width: 57px;
  height: 86px;
  background: #E09C5F;
  border-radius: 0 0 25px 25px;
  display: block;
  margin: 0 auto;
}
.icecream > .stick:after {
  display: block;
  content: '';
  width: 100%;
  height: 24px;
  background: #8D613B;
}

@-webkit-keyframes flavours {
  to {
    background-position: 0 -100vh;
  }
}

@keyframes flavours {
  to {
    background-position: 0 -100vh;
  }
}

​x
 
body,
html {
  height: 100%;
}
​
.container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #33485F;
}
​
.icecream > .flavor {
  position: relative;
  width: 190px;
  height: 260px;
  border-radius: 80px 80px 10px 10px;
  overflow: hidden;
}
.icecream > .flavor:after {
  content: '';
  position: absolute;
  left: 21px;
  bottom: 20px;
  width: 20px;
  height: 170px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
}
​
.icecream > .flavor > .flavours {
  position: relative;
  top: 0%;
  left: -20%;
  width: 140%;
  height: 120%;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #f63a99), color-stop(25%, #30dcf6), color-stop(25%, #30dcf6), color-stop(50%, #30dcf6), color-stop(50%, #f2d200), color-stop(50%, #f2d200), color-stop(75%, #f2d200), color-stop(75%, #70ca5c));
  background-image: linear-gradient(0deg, #f63a99 25%, #30dcf6 25%, #30dcf6 25%, #30dcf6 50%, #f2d200 50%, #f2d200 50%, #f2d200 75%, #70ca5c 75%);
  background-position: 0px 0px;
  background-repeat: repeat-y;
  -webkit-animation: flavours 5s linear infinite;
          animation: flavours 5s linear infinite;
  -webkit-transform: rotate(155deg);
          transform: rotate(155deg);
}
​
.icecream > .stick {
  width: 57px;
  height: 86px;
  background: #E09C5F;
  border-radius: 0 0 25px 25px;
  display: block;
  margin: 0 auto;
}
.icecream > .stick:after {
  display: block;
  content: '';
  width: 100%;
  height: 24px;
  background: #8D613B;
}
​
@-webkit-keyframes flavours {
  to {
    background-position: 0 -100vh;
  }
}
​
@keyframes flavours {
  to {
    background-position: 0 -100vh;
  }
}
​

JavaScript

​

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg