Pure CSS3 bubble Animation button implementation tutorial, css3 bubble animation tutorial

Pure CSS3 bubble Animation button implementation tutorial, css3 bubble animation tutorial

This CSS3 Animation button is very creative. When the mouse slides over the button, it does not just change the background color of the button as other buttons, but rather has a cool bubble animation. With this amazing CSS3 Animation button, this article mainly shares the button implementation process and code with you, hoping to provide substantial help to those who are learning CSS3. Let's take a look at the Online Demo:

Download demo source code online

Next, we will explain the implementation process of this CSS3 bubble Animation button, which consists of HTML code and CSS code.

HTML code:

<div id="buttonContainer">    <a href="#">Big Button</a>    <a href="#">Big Button</a>    <a href="#">Big Button</a>    <a href="#">Big Button</a>    <a href="#">Medium Button</a>    <a href="#">Medium Button</a>    <a href="#">Medium Button</a>    <a href="#">Medium Button</a>    <a href="#">Small Button</a>    <a href="#">Small Button</a>    <a href="#">Rounded</a>    <a href="#">Small Button</a>    <a href="#">Small Button</a>    <a href="#">Rounded</a></div>

HTML code is relatively simple, that is, using a link to construct buttons. Of course, the effect in the demo still needs strong CSS rendering.

The focus of the next step is the CSS code. First, we will render the basic styles for each button. These styles are shared by each button:

.button{    font:15px Calibri, Arial, sans-serif;    /* A semi-transparent text shadow */    text-shadow:1px 1px 0 rgba(255,255,255,0.4);    /* Overriding the default underline styling of the links */    text-decoration:none !important;    white-space:nowrap;    display:inline-block;    vertical-align:baseline;    position:relative;    cursor:pointer;    padding:10px 20px;    background-repeat:no-repeat;    /* The following two rules are fallbacks, in case       the browser does not support multiple backgrounds. */    background-position:bottom left;    background-image:url('button_bg.png');    /* Multiple backgrounds version. The background images       are defined individually in color classes */    background-position:bottom left, top right, 0 0, 0 0;    background-clip:border-box;    /* Applying a default border raidus of 8px */    -moz-border-radius:8px;    -webkit-border-radius:8px;    border-radius:8px;    /* A 1px highlight inside of the button */    -moz-box-shadow:0 0 1px #fff inset;    -webkit-box-shadow:0 0 1px #fff inset;    box-shadow:0 0 1px #fff inset;    /* Animating the background positions with CSS3 */    /* Currently works only in Safari/Chrome */    -webkit-transition:background-position 1s;    -moz-transition:background-position 1s;    transition:background-position 1s;}.button:hover{    /* The first rule is a fallback, in case the browser       does not support multiple backgrounds    */    background-position:top left;    background-position:top left, bottom right, 0 0, 0 0;}.button:active{    /* Moving the button 1px to the bottom when clicked */    bottom:-1px;}

It also defines the style when the button slides over and is activated.

Finally, it is a bubble animation effect. Let's take one of the buttons as an example. The Code is as follows:

.blue.button{    color:#0f4b6d !important;    border:1px solid #84acc3 !important;    /* A fallback background color */    background-color: #48b5f2;    /* Specifying a version with gradients according to */    background-image:    url('button_bg.png'), url('button_bg.png'),                        -moz-radial-gradient(    center bottom, circle,                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),                        -moz-linear-gradient(#4fbbf7, #3faeeb);    background-image:    url('button_bg.png'), url('button_bg.png'),                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));}.blue.button:hover{    background-color:#63c7fe;    background-image:    url('button_bg.png'), url('button_bg.png'),                        -moz-radial-gradient(    center bottom, circle,                                                rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),                        -moz-linear-gradient(#63c7fe, #58bef7);    background-image:    url('button_bg.png'), url('button_bg.png'),                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));}

From the code, we can see that when the mouse slides over the button, the bubble background image in the button will achieve a gradient animation effect and make some transparent effect, in this way, the animation effects of bubble rising appear. All the code is like this. You can download the source code for research.

Download demo source code online

How does css3 + html load the display animation instead of clicking a button to achieve the effect?

When loading the page, a js script is automatically loaded and the button is clicked.
 
Flash css3 requires three buttons to control three windows. The key is to control the code and code, and click a button to display a window,

Learn the as code applicable to flash cs3. As to control the frame to which the button is clicked and then jumped for playback. Generally, Baidu searches for flash to implement click as code. Try it...