Animation How to - Create CSS3 Fading Line

Question

We would like to know how to create CSS3 Fading Line.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!-- w  w w  .  j  a va  2s . c om-->
  margin-top: 50px;
}

.sexy_line {
  display: block;
  border: none;
  color: white;
  height: 1px;
  background: black;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000),
    to(#fff));
}
</style>
</head>
<body>
  <div>
    <span class="sexy_line"></span>
  </div>
</body>
</html>

The code above is rendered as follows: