文字光影动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #000;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn-shine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 48px;
  color: #fff;
  background: linear-gradient(to right, #4d4d4d 0, #fff 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 30px;
  text-decoration: none; 
  white-space: nowrap;
}
@-moz-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 280px;
  }
  100% {
    background-position: 280px;
  }
}
@-webkit-keyframes shine {
  0% {
    background-position: 0; 
  }
  60% {
    background-position: 280px;
  }
  100% {
    background-position: 280px;
  }
}
@-o-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 280px;
  }
  100% {
    background-position: 280px;
  }
}
@keyframes shine {
  0% {
    background-position: 0;
  } 
  60% {
    background-position: 280px;
  }
  100% {
    background-position: 280px;
  }
}

JavaScript

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