Wonderful CSS3 animation! A set of fantastic button effects and css3 Sets

Wonderful CSS3 animation! A set of fantastic button effects and css3 Sets

Today we bring you five fantastic animation buttons. The following is an online demonstration. Put the mouse over the button and try it. It's a surprise!CSS3The introduction of many new features that provide powerful functions allows designers and developers to easily create a variety of exquisite interface effects.

Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.

 

 

Online Demo of source code download

 

These exquisite effects are usedCSS3Border-radius (rounded corner), box-shadow (shadow), transition (deformation), transform (conversion), and animation (animation). The code in the public part is simplified as follows:

Section> div {display: inline-block; position: relative; width: 200px; height: 200px; margin: 0px auto; /* set the square element border-radius to 50% to a circle */border-radius: 50%;/* black border effect with a width of 10px and an opacity of 0.7 */border: 10px solid hsla (0, 0% ,. 7);/* implement the three-dimensional button effect through border shadow. inset is the internal shadow effect */box-shadow: inset 0 15px 15px-5px hsla (100% ,. 7), inset 0-5px 10px 3px hsla (0% ,. 6), 0 8px 10px 2px hsla (0% ,. 3); background-position: center;/* Initial scaling 0.66 times */transform: scale (. 66);/* when the focus is lost, perform an animated transformation based on the custom besell time curve */transition: transform. 5 s cubic-bezr (. 32, 0 ,. 15, 1);} section> div: hover {cursor: none;/* restore the original size when hovering */transform: scale (1 ); /* When hovering over the mouse, perform an animated transformation based on the custom besell time curve */transition: transform. 2 s cubic-bezr (. 32, 0 ,. 15, 1 );}

The above Code uses the besell curve. In the field of mathematical numerical analysis, the besell curve, also known as the besell curve, is a very important parameter curve in computer graphics. A higher dimension is called the besell curve. The besell triangle is a special example.

In 1962, the beiser curve was widely published by French engineer Pierre béserz, who used the beiser curve to design the car's main body. The beiser curve was initially developed by Paul de Casteljau in 1959 using the de Casteljau algorithm and obtained by using a stable numerical method. If you want to learn more about the beiser curve, go to Wikipedia to learn more about the beiser curve.

Result 1 (Praticle) usedCSS3Radial-gradient (radial or radioactive gradient, another is linear gradient), repeating-radial-gradient (repeated gradient) andCSS3Animation ).

To facilitate reading and learning, the code of result 1 is simplified as follows:

. Particle {background-size: 12px 12px; background-color: #000;/* The highlighted Effect of box-shadow in the public style section is too strong. reconfigure */box-shadow here: inset 0 15px 15px-5px hsla (0,0%, 100% ,. 25), inset 0-5px 10px 3px hsla (0% ,. 6), 0 8px 10px 2px hsla (0% ,. 3);/* use radial gradient and repeated gradient to achieve the background image effect */background-image: radial-gradient (#555 0px, hsla (0%, 0) 2px, hsla (0%, 0) 24px), repeating-radial-gradient (white 0px, black 2px, black 48px );}. particle: hover {/* execute the particle-size and particle-positon animation effects when hovering over the mouse */animation: particle-size. 24 s linear infinite, particle-positon. 48 s linear infinite alternate;} @ keyframes particle-size {/* This key frame named particle-size is used to produce the animated Effect of background size changes */from {background-size: 6px 6px, 12px 12px;} to {background-size: 12px 12px, 24px 24px ;}} @ keyframes particle-positon {/* The Key Frame named particle-positon is used to produce the animation effect of the background position change */from {background-position: 60px, 60px ;} to {background-position: 140px, 140px ;}}

 

Online Demo of source code download

 

Articles you may be interested in

• 10 useful results in Web development [Source Code download]
• Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
• 12 amazing creative 404 error page Designs
• Let the website get started! 12 excellent jQuery animation plug-ins
• 8 amazing HTML5 and JavaScript Effects

 

Link to this article: Magic CSS3 animation! A set of fantastic button Effects

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

This article from [dream sky (http://www.cnblogs.com/lhb25 )]

How to change a set of static images to dynamic scrolling images in css?

You can use css3 for continuous scrolling (animat, 0%, 50%, 100%) and set the image position at different times. But it is only "rolling", which is generally not called "rolling" (strictly speaking, sliding ).
Therefore, your problem is ambiguous.

Css3 also has a way to implement scrolling. That is, the use of excessive effect (transition), he can also achieve the rolling effect. In addition, my personal feeling is quite consistent with what you mean.

The specific method is to slide the hyperlink over an image attribute, such:
Li a img {margin-top: 0px ;}
Li a: hover img {margin-top:-20px ;}
Li a img {-webkit-transition: margin-top 0.5 s;}/* Note the hack here to take care of multiple browsers */
In this way, the mouse slide, the picture will move up 20 pixels, move the mouse away, and slide down again.

Next, pull down the strictly-defined [dynamic Scrolling Image]. The general explanation is that a group of images can be animated and slide in a certain area. Note that it is a group. Css generally does not have the effect of processing multiple sets of images (or simulating animated frames with css. Two types of dynamic scrolling images are common. One is a controllable scrolling list, and the other is an automatic infinite loop scrolling. It is usually used as a rolling news, group chart, or album (elegant style.