[Special Recommendation] My friends are stunned! 8 superb Web effects

CodePen is an onlineHTML,CSSAndJavaScriptThe code editor allows you to write code and preview the results in real time. You can present your work online, or see the amazing effects of others on the web page.

Today, this article selects eight amazing Web effect demos for everyone. These demos can be said to be all works of art, so that everyone can be shocked! ()

Articles you may be interested in

• Use CSS3 to achieve superb Loading animation Effects
• Select 12 excellent jQuery Ajax paging plug-ins and tutorials
• Which of the 10 Code editors you may have never used?
• We recommend 25 great HTML5 development frameworks and tools.
• 14 popular frontend development framework recommendations supporting responsive design

Light Loader

A shiny progress bar. I like particle demo works, especially those that can be applied to reality, such as the progress bar effect compiled by Jack Rugile. Looking at this dazzling effect, even if I wait for a while, it will be okay :)

Whale

A whale that moves with the mouse. You may wonder how this effect is made. In fact, it just overlays some simple shapes and moves with the mouse.

Avgrund

Three-dimensional pop-up window effect. The author of this work is Hakim. He has many good works on CodePen and it is difficult to choose the best one. I chose this because it is very practical. The visual effects of the modal window and the depth make the whole interface have a special three-dimensional effect.

Tearable Cloth

This is a smooth demonstration of the effect of simulating the detachable fabric. You will see thatCanvasWith the powerful drawing and animation functions, you can achieve the effect with little code. I believe this is CodePen's most popular work, with more than 1.5 million of page views. Amazing interactions, gravity, and swaying feelings-are enough to be fake.

Ribbon

Author: Justin Windle. When you see such a smooth effect, you can imagine the futureWebThe platform has many surprises to expect.

Mechanical Grass

Mechanical grass effect by Tim Holman. Looking at this work, I seem to be in a place far away from the secular world, such as steampunk's work "Alice in Wonderland".

Twitter Button Concept

Twitter three-dimensional button effect, similar to flip action. WithCSS3Technology can create a variety of cool visual effects.

Triangle Optical regression sion

The visual effect of triangles is presented by Ana Tudor. She is good at teaching programming and explains some theories through visual demonstration. This is my favorite interesting example.

 

Articles you may be interested in

• 9 incredible HTML5 Canvas application trials
• 35 amazing CSS3 animation demos
• 10 popular topic Bootstrap in Metro UI Style
• 35 exquisite CSS3 and HTML5 webpage templates are recommended
• OverAPI.com-developer online quick query manual

 

Original article: Chris Coyier's Favorite CodePen Demos

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