div+css实现文字悬浮阴影分离效果代码-html代码-BFW代码库

div+css实现文字悬浮阴影分离效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现文字悬浮阴影分离效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @font-face {
  font-family: "dTJakobVariable";
  src: url("//repo.bfw.wiki/bfwrepo/font/dTJakobVariableConceptGX.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
HTML, BODY {
  height: 100%;
  overflow: hidden;
}

BODY {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 10px, transparent 10px, transparent 20px);
  color: #FFF;
}

.fonts {
  font-size: 180px;
  text-align: center;
}

.dTJakob {
  font-family: "dTJakobVariable";
}
.dTJakob--layered {
  position: relative;
  z-index: 1;
  font-feature-settings: "liga" 0, "dlig" 0, "calt" 1;
  font-variation-settings: "wght" 40;
}
.dTJakob--layered::before, .dTJakob--layered::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 0.25s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: color;
          animation-name: color;
}
.dTJakob--layered::before {
  font-feature-settings: "liga" 1, "dlig" 0, "calt" 0;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
  color: skyblue;
}
.dTJakob--layered:hover::before {
  top: -90%;
}
.dTJakob--layered::after {
  z-index: -1;
  font-feature-settings: "liga" 0, "dlig" 1, "calt" 0;
  color: yellowgreen;
}
.dTJakob--layered:hover::after {
  top: 90%;
}

@-webkit-keyframes color {
  0% {
    color: tomato;
  }
  10% {
    .........完整代码请登录后点击上方下载按钮下载查看