悬停时偏斜文字

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background-color: #fb9;
  color: #aaa;
  font-size: 40px;
}

.text {
  display: flex;
  justify-content: center;
  margin-top: 50vh;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.text:hover {
  -webkit-transform: rotateX(35deg), translateY(-50%);
          transform: rotateX(35deg), translateY(-50%);
}
.text:hover span {
  color: #ccc;
}
.text:hover span:nth-child(odd) {
  -webkit-transform: skewY(15deg);
          transform: skewY(15deg);
}
.text:hover span:nth-child(even) {
  -webkit-transform: skewY(-15deg);
          transform: skewY(-15deg);
  background-color: #f9f9f9;
  color: #a6a6a6;
}
.text > span {
  display: block;
  background-color: #fff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  transition: color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
  transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
  box-shadow: 0 40px 50px rgba(0, 0, 0, 0.1);
}
.text > span:first-child {
  border-radius: 5px 0 0 5px;
}

JavaScript

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