水滿出來的特效

Web Design

轉載至–>http://priteshgupta.com/2011/07/filling-a-glass-with-water-using-html5/

Filling a Glass with Water (Using CSS3)

HTML5 is amazing and list of things which can be done using it is endless. Anyways, I am sharing how we can fill an empty glass with water using HTML5, I am sharing the code snippets for it. Let me know your thoughts on it. A modern web browser(Like Firefox, Chrome, Opera, Safari) will be needed for it. The live demonstration of this can be seen at the end of this post.

The HTML

The HTML is really simple, it has three divs, first for container of the glass, second for the glass and the third for the water in it. The first div(container) is not really necessary.

<div id="container">
<div id="glass">
    <div id="water"></div>
</div>
</div>

The CSS

This is where it gets a little tricky, the #container has the general styling properties for the container, the #glass again has general CSS properties of the glass. Now in#water, a background image has been used for waves for the water, you can also specify a color instead of the background image if you don’t need the waves. Then comes thetransition CSS properties, transition tags are used here for the easing effect after the hover action(when the water has to fall down). Then finally #glass:hover #watercomes which defines the CSS properties when the user hovers over the element, transition properties are the CSS tags responsible for these easing effects.

#container {
    background: rgba( 0, 0, 0, 0.10);
    margin-left:auto;
    margin-right:auto;
    width: 300px;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-top: 1px solid #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 30px;
    padding-top: 5px;
}
#glass {
    background: rgba( 255, 255, 255, 0.50);
    border: 1px solid #bbb;
    border-top: 1px solid #eee;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    position: relative;
}
#water {
    background-image: url("waves.png");   
    background-position: top right;
    position: absolute;
    bottom: 0px;
    width: 300px;
    height: 100px;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 3s ease-out;
    -o-transition: all 3s ease-out;
    transition: all 3s ease-out;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#glass:hover #water {
    height: 350px;
    background-position: top left;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 3s ease-out;
    -o-transition: all 3s ease-out;
    transition: all 3s ease-out;
}

Demonstration

Here is a demonstration below for filling a glass with water, alternatively you can clickhere.

Or if you don’t like the waves(Or click here).

Further Reading

Below are the pages of CSS properties used in above snippets.

, , , ,
選單