Tiger Bird Webdesign: Text Animation With Hover

Friday, 14 November 2014

Text Animation With Hover

Honey Bunny!

If you move your mouse over the text it looks like if it's blown away by the wind.
The code is pretty straightforward. Use the text-shadow property of CSS and put different px-values. To make the effect as if the text blows away set the last 2 pixel values relatively high. The hover property enables you to start the effect by putting the mouse pointer over the text.

CSS&HTML

<html>
<head>
<title> Text Animation With Hover</title>
<style>

#honey_bunny
{position:absolute;
top:50px;
left:200px;
font-size:200%;
color:#CC6600;
}

div:hover
{
text-shadow:
10px -10px 10px,
20px -20px 20px,
30px -20px 30px,
50px -40px 40px,
80px -50px 50px,
100px -50px 60px,
110px -70px 70px,
150px -70px 80px;
opacity:0;
-webkit-transition-duration:5s;
transition-duration:5s;
}

</style>
</head>
<body>
 
<div id="honey_bunny">
Honey Bunny!</div>
</div>

</div>
</body>
</html></div>

Tiger Bird Webdesign

Friday, 14 November 2014

Text Animation With Hover

CSS&HTML

No comments:

Post a Comment