拆分文字显示

下载代码

html

css

分享到微信朋友圈

html

css

body {
  height: 100vh;
  background: -webkit-linear-gradient(75deg, #00a9f1, #cf00f1);
  background: linear-gradient(15deg, #00a9f1, #cf00f1);
  color: #fff;
  position: relative;
}
body:before {
  content: 'CLICK';
  font-family: 'Roboto';
  font-size: 15px;
  color: white;
  position: absolute;
  z-index: 10;
  right: 30px;
  top: 30px;
}
@media (max-width: 480px) {
  body:before {
    top: auto;
    bottom: 20px;
    right: 20px;
  }
}

h1 {
  font-family: Roboto, sans-serif;
  font-weight: 100;
  font-size: 100px;
  margin: 0;
  padding: 30px;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  h1 {
    padding: 20px;
    font-size: 40px;
  }
}
h1 span {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1), -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  -webkit-transform: translate(20%, 100%);
          transform: translate(20%, 100%);
  position: relative;
  z-index: 1;
  letter-spacing: -0.03em;
  text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.1);
}
h1 span:before {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(-40%);
          transform: translateY(-40%);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1), -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
}
h1 span.row {
  overflow: hidden;
  line-height: 0.9;
  display: block;
  -webkit-transform: none;
          transform: none;
}
h1 span.row:before {
  display: none;
}
h1 .animate {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
h1 .animate:before {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

JavaScript

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