js+css实现文字段落引言逐字跳动动画效果代码-html代码-BFW代码库

js+css实现文字段落引言逐字跳动动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现文字段落引言逐字跳动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&amp;family=Old+Standard+TT:ital,wght@0,400;0,700;1,400'>
  
<style>
body {
  margin: 0px;
  background: #333;
  font-family: "DM Serif Text", serif;
  font-weight: 300;
  font-style: normal;
}
body * {
  box-sizing: border-box;
}

div.wall {
  margin: 50px 5%;
  font-size: 250%;
  line-height: 0%;
  display: block;
  text-shadow: 0px 1px 1px #111;
  color: #ffffd1;
  position: relative;
}
div.wall:after, div.wall:before {
  content: '"';
  display: block;
  font: italic 250px cursive;
  line-height: 150px;
  text-indent: -60px;
  width: 60px;
  height: 60px;
  float: left;
  margin: -10px 40px 10px 0px;
  position: relative;
  color: #fffffc;
}
div.wall:after {
  content: '"';
  transform: scaleX(-1) scaleY(-1);
  margin: -20px 0px 10px 20px;
}
div.wall span,
div.wall em {
  list-style: none;
  display: block;
  position: relative;
  float: left;
  width: auto;
  min-width: 10px;
  height: 50px;
}
div.wall span {
  transition: color 0.2s ease, transform 0.2s ease;
}
div.wall span.active {
  color: #ffff9e;
  transform: scale(1.9);
}
div.wall span:has(+ span.active) {
  color: white;
  transform: scale(2.5);
  filter: blur(4px);
}
div.wall span.active + span {
  color: white;
  transform: scale(1.7);
  filter: blur(2px);
}
div.wall span.active + span + span + span,
div.wall span.active + span + span {
  color: white;
  transform: scale(1.2);
  filter: blur(4px);
  transition: color 0.2s ease, transform 0.4s ease-in-out;
}
div.wall em {
  width: 13px;
}

i {
  display: block;
  clear: both;
  text-align: right;
  padding: 70px 20% 100px 0px;
  font-size: 50px;
  font: italic 36px "Times New Roman";
  color: #fff;
}
</style>


  
  
</head>

<body translate="no">
  <div class="wall">In the long history of the world, only a few generations have been granted the role of defending freedom in its hour of maximum danger. I do not shrink from this responsi.........完整代码请登录后点击上方下载按钮下载查看