Page Widget How to - Create Text Blur with transition

Question

We would like to know how to create Text Blur with transition.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h1 {<!--from  ww  w  .j a  v a2  s  .  com-->
  color: transparent;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  font-size: 40px;
  -webkit-transition: text-shadow 1.9 ease-out;
  -moz-transition: text-shadow 1.9 ease-out;
  -ms-transition: text-shadow 1.9 ease-out;
  -o-transition: text-shadow 1.9 ease-out;
  transition: text-shadow 1.9 ease-out;
}

h1:hover {
  text-shadow: 0 0 0 rgba(0, 0, 0, 1);
  -webkit-transition: text-shadow 0.5s;
  -moz-transition: text-shadow 0.5s;
  -ms-transition: text-shadow 0.5s;
  -o-transition: text-shadow 0.5s;
  transition: text-shadow 0.5s;
  cursor: default;
}
</style>
</head>
<body> 
    Hover to read.
  <h1>java2s.com</h1>
</body>
</html>

The code above is rendered as follows: