Page Widget How to - Create animation alert message box

Question

We would like to know how to create animation alert message box.
Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.5.js'></script>
<style type='text/css'>
.message {<!--  www  .j ava2 s  .  co  m-->
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .07)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .07)), color-stop(.75, rgba(255, 255, 255, .07)), color-stop(.75, transparent), to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .07) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .07) 75%, transparent 75%, transparent);
    background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-background-size: 50px 50px;
    border: 1px solid;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #FFF;
    padding: 13px;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    -webkit-animation: animate-stripes 5s linear infinite;
}
.info {
    background-color: #6CAAC7;
    border-color: #397089;
}
.error {
    background-color: #DD5353;
    border-color: #8E1E1E;
}
.warning {
    background-color: #CFC932;
    border-color: #9C981C;
}
.success {
    background-color: #82D172;
    border-color: #408A32;
}
.generic {
    background-color: #888;
    border-color: #333;
}
.title {
    font-weight: bold;
    margin-right: 10px;
}
@-webkit-keyframes animate-stripes {
    from {
        background-position: 00;
    }
    to {
        background-position: -50px 0;
    }
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $("p").click(function () { 
        $(this).fadeOut(); 
    });
});//]]>  
</script>
</head>
<body>
  <p class="info message" title="Click to dismiss message">
    <span class="title">title </span>information message.
  </p>
  <p class="error message" title="Click to dismiss message">
    <span class="title">title</span>error message.
  </p>
  <p class="warning message" title="Click to dismiss message">
    <span class="title">title</span>warning message.
  </p>
  <p class="success message" title="Click to dismiss message">
    <span class="title">title</span>success message.
  </p>
  <p class="generic message" title="Click to dismiss message">
    <span class="title">title</span>generic message.
  </p>
</body>
</html>
The code above is rendered as follows: