CSS3 Letter

发布于大漠

12 年前

这是一个很简单的案例，不过效果很有创意，一个标题“w3cplus”，默认只显示一个字母“w”，但当你的鼠标悬浮到这个标题上时，整个“w3cplus”会动态的给你展开，其实这个效果很类似于Letteringjs的效果，整个效果中letter-spacing属性的运用非常关键，然后配上CSS3的transition和opacity属性。

demo download

HTML CODE

<h1><a href="https://www.fedev.cn" class="home"><b>W</b><span>3cplus</span></a></h1>

CSS Code

h1{
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  font-size: 4em;
	margin: 20px;
}
h1 a {
  display: inline-block;
  text-decoration: none;
  font-family: 'Jim Nightshade', cursive;
  text-decoration: none;
  }
h1 a::after,
h1 a::before {
  font-size: 2.375em;
  position: relative;
  top: 0.10em;
  letter-spacing: 0.2em;
  left:0.13em;
}
h1 a::after {
  content: ">";
}
h1 a::before {
  content: "<";
}

h1 a b,
h1 a span {
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: -0.44em;
  font-size: 2em;
}
h1 a span {
  opacity: 0;
}
h1 a b {
  letter-spacing:-0.16em;
}
h1 a:hover span {
  opacity: 1;
}
h1 a:hover b,
h1 a:hover span {
  letter-spacing:0;
  text-decoration:none;
}

demo download

如需转载，烦请注明出处：https://www.fedev.cn/demo/css3-letter.html

Women's Clothing, Footwear & Accessories