文字动画

下载代码

html

css

分享到微信朋友圈

html

css

@import url(https://fonts.googleapis.com/css?family=Righteous);
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: black;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 2em;
  -webkit-filter: contrast(20);
          filter: contrast(20);
  background-color: black;
  overflow: hidden;
}

h1 {
  font-family: Righteous;
  color: white;
  font-size: 4rem;
  text-transform: uppercase;
  line-height: 1;
  -webkit-animation: letterspacing 5s infinite alternate ease-in-out;
          animation: letterspacing 5s infinite alternate ease-in-out;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  letter-spacing: -2.2rem;
}

@-webkit-keyframes letterspacing {
  0% {
    letter-spacing: -2.2rem;
    -webkit-filter: blur(0.3rem);
            filter: blur(0.3rem);
  }
  50% {
    -webkit-filter: blur(0.5rem);
            filter: blur(0.5rem);
  }
  100% {
    letter-spacing: .5rem;
    -webkit-filter: blur(0rem);
            filter: blur(0rem);
    color: #fff;
  }
}

@keyframes letterspacing {
  0% {
    letter-spacing: -2.2rem;
    -webkit-filter: blur(0.3rem);
            filter: blur(0.3rem);
  }
  50% {
    -webkit-filter: blur(0.5rem);
            filter: blur(0.5rem);
  }
  100% {
    letter-spacing: .5rem;
    -webkit-filter: blur(0rem);
            filter: blur(0rem);
    color: #fff;
  }
}

JavaScript

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