Wonderful CSS3 animations! A fantastic set of button effects

Today brings you five fantastic animated button effects. Here is the online demo, put the mouse on the button to try, there are surprises Oh! CSS3 introduces many new features that are powerful, making it easy for designers and developers to create a variety of beautiful interface effects.

　　Tips: For the best results, browse through modern browsers such as ie10+, Chrome, Firefox, and Safari.

SOURCE Download Online Demo

These fine effects use features such as CSS3 Border-radius (fillet), Box-shadow (shadow), Transition (morph), transform (transform), and animation (animation), and the Code of the public part after streamlining the following:

Section > div {    display:inline-block;    position:relative;    width:200px;    height:200px;    margin:0px Auto;    /* for square element Border-radius set to 50% just turn round */    border-radius:50%;     /* Black border effect with a width of 10px, opacity 0.7 */    border:10px solid Hsla (0,0%,0%,.7);     /* Stereo button effect via border Shadow, inset is inner shadow effect *    /Box-shadow:inset 0 15px 15px-5px Hsla (0,0%,100%,.7),                 inset 0-5px 10px 3px HSL A (0,0%,0%,.6),                 0 8px 10px 2px hsla (0,0%,0%,.3);    Background-position:center;    /* initial scaling 0.66 times times *    /Transform:scale (.);     /* Animate the effect of a custom Bezier time curve when losing focus *    /Transition:transform. 5s Cubic-bezier (. 32,0,.15,1);} section > Div:hover {    Cursor:none;    /* Restore original size when hovering *    /Transform:scale (1);     /* Animate the effect of a custom Bezier time curve on mouse hover *    /transition:transform. 2s cubic-bezier (. 32,0,.15,1);}

Bezier curves are used in the above code, and Bezier curves (Bézier curves) are very important parametric curves in computer graphics in the field of mathematical numerical analysis. The wider Bezier curve of the higher dimension is called a Bezier surface, where the Bezier triangle is a special instance.

The Bezier Curve was published in 1962 by the French engineer Pierre Bessel Pierre Bézier, who used the Bezier curve to design the body of the car. The Bezier curve was originally developed by Paul de Casteljau in 1959 using the de Casteljau algorithm to find the Bezier curve in a stable numerical way. To get a deeper understanding of the Bezier curve, you can read about Bezier curves in Wikipedia.

The effect One (praticle) uses the CSS3 radial-gradient (radial or radioactive gradients, the other is a linear gradient), repeating-radial-gradient (repeating gradients), and CSS3 Animation (animation).

To facilitate reading and learning, the code for effect one is streamlined as follows:

. particle {background-size:12px 12px;    Background-color: #000; /* The Box-shadow generated by the public style section above is too strong, reconfigure it here/* Box-shadow:inset 0 15px 15px-5px Hsla (0,0%,100%,.25), inset 0-    5px 10px 3px Hsla (0,0%,0%,.6), 0 8px 10px 2px hsla (0,0%,0%,.3);                      /* Use a radial gradient and a repeating gradient to achieve the background picture effect */background-image:radial-gradient (#555 0px, Hsla (0,0%,0%,0) 2px, Hsla (0,0%,0%,0) 24px), Repeating-radial-gradient (white 0px, black 2px, Black 48px);}.         Particle:hover {/* mouse hover to perform particle-size and Particle-positon two animated effects */animation:particle-size. 24s linear Infinite,    Particle-positon. 48s linear infinite Alternate;}     @keyframes Particle-size {/* This keyframe named Particle-size is used to animate the background size change */from {background-size:6px 6px, 12px 12px;} To {background-size:12px 12px, 24px 24px;}}      @keyframes Particle-positon {/* This keyframe named Particle-positon is used to animate the background position change */from {background-position:60px, 60px;} To {background-position:140px, 140px;}}

SOURCE Download Online Demo

Related articles that may be of interest to you

• Web development in a very practical 10 effects "with Source download"
• Carefully selected excellent jquery Ajax page plug-ins and tutorials
• 12 Amazing ideas for 404 error page Design
• Let the website Move! 12 Excellent jQuery animation plugins
• 8 stunning HTML5 and JavaScript effects

This article link: the Magical CSS3 animation! A fantastic set of button effects

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

This article comes from "Dream Sky (http://www.cnblogs.com/lhb25/)"