CSS和SVG小动画

下载代码

html

css

分享到微信朋友圈

html

</svg>

</footer>

css

body {
  font-family: Lato, sans-serif;
  --col-deepblue: #4478e3;
}

footer {
  width:100vw;
  position:fixed;
  bottom:0px
}
footer div {
  background-color: var(--col-deepblue);
  margin: -5px 0px 0px 0px;
  padding:0px;
  color: #fff;
  text-align:center;
}
svg {
  width:100%;
  overflow:visible;
}

.wave {
  animation: wave 3s linear;
  animation-iteration-count:infinite;
  fill: #4478e3;
}
.drop {
  fill: var(--col-deepblue);
  xfill: #99000055;
  animation: drop 3.2s linear infinite normal;
  stroke: var(--col-deepblue);
  stroke-width:0.5;
  transform: translateY(25px) ;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.drop1 {
  
}
.drop2 {
  animation-delay: 3s;
  animation-duration:3s;
}
.drop3 {
  animation-delay: -2s;
  animation-duration:3.4s;
}
.drop4 {
  animation-delay: 1.7s;
}
.drop5 {
  animation-delay: 2.7s;
  animation-duration:3.1s;
}
.drop6 {
  animation-delay: -2.1s;
  animation-duration:3.2s;
}
.gooeff {
  	filter: url(#goo);
}
#wave2 {
  animation-duration:5s;
  animation-direction: reverse;
  opacity: .6
}
#wave3 {
  animation-duration: 7s;
  opacity:.3;
}
@keyframes drop {
  0% {
    transform: translateY(25px); 
  }
  30% {
    transform: translateY(-10px) scale(.1);
  }
  30.001% {
    transform: translateY(25px) scale(1); 
  }
  70% {
    transform: translateY(25px); 
  }
  100% { 
    transform: translateY(-10px) scale(.1);  
  }
}
@keyframes wave {
  to {transform: translateX(-100%);}
}
@keyframes ball {
  to {transform: translateY(20%);}
}

JavaScript

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