10 amazing HTML5 applications and source code, and 10 html5

Source: Internet
Author: User

10 amazing HTML5 applications and source code, and 10 html5
1. Pure CSS3 for lighter flame Animation

This is a cool pure CSS3 animation effect. It is a lighter that can be ignited. When you move the mouse over this lighter, the lighter will open, then, the animation effects of flame burning appear. In addition, it should be noted that the whole animation is implemented using pure CSS3, without a line of JS Code, friends, is this CSS3 animation cool?

Online Demo

Source code download

2. HTML5/CSS3: apply three types of filtering animations to image filtering and Classification

Today, we will share an image special effect based on HTML5 and CSS3. It can easily classify and filter various images, images have very cool animation effects. Combined with the characteristics of CSS3, three cool image filtering animations are provided here.

Online Demo

Source code download

3. HTML5 Video Player UI

Today, I want to share an HTML5 video player with excellent UI. the player can play/pause, adjust the volume, and play the video in full mode. We can also look at the HTML5 video players that have been released before, such as the HTML5 player API set to easily learn HTML5 player development, which is also very cool.

Online Demo

Source code download

4. The pure CSS3 Tooltip prompts the shadow border to fly into the animation.

Tooltip not only saves valuable space on the web page, but also allows users to quickly obtain the desired information. The CSS3 Tooltip to be shared today looks very beautiful and is implemented in pure CSS3, the border of the Tooltip has a shadow effect, and the Tooltip prompt box also has an animated effect. It is a cool CSS3 Tooltip application.

Online Demo

Source code download

5. Special Effects of CSS3 flame Effects

Today, we will share another special text effect for CSS3 flame effects. Unlike the previous special text effect, it is static and has no animation effect, but it is also cool.

Online Demo

Source code download

6. CSS3 spring coil Animation

Today we are going to share an animated special effect of pure CSS3, which is a feature of Simulating Spring coils. It can rotate and twist the spring coil without stopping, making the spring animation extremely vivid and dynamic. In addition, because the spring is twisted, the color of the coil varies slightly from different angles.

Online Demo

Source code download

7. Over 150 CSS 3 animated SVG icons

CSS3 is really powerful, but the strength of SVG cannot be underestimated. Today we want to combine them and share them with you more than 150 very interesting pure CSS 3 animated SVG icons. Among the 150 SVG icons, there are animation effects that move the mouse over, some are shadow effects, and some are dynamic animations. These icons are really cool.

Online Demo

Source code download

8. HTML5 SVG multi-line chart and chart can be scaled and displayed

Today, we will introduce a line chart based on HTML5 SVG. This chart supports multiple lines to be displayed together, allowing you to easily compare data of different colored lines. Another feature of charts is that they can be scaled and moved, which greatly facilitates users to browse chart data and is very user-friendly. For more chart applications, go to the HTML5 chart column.

Online Demo

Source code download

9. Bootstrap-based CSS3 drop-down menu 3D effect

Bootstrap is an open-source toolkit for front-end development launched by Twitter. Based on the Bootstrap framework, we can easily create beautiful UI interfaces. The CSS3 drop-down menu to be shared today is based on Bootstrap. The drop-down menu also looks very good and has a 3D visual effect.

Online Demo

Source code download

10. Pure CSS3 achieves extremely lifelike bicycle Animation

This time we will share a bicycle animation using pure CSS3. Unlike the previous one, this bicycle can be moved, just like a person riding a bicycle, the wheel will also turn, a very realistic animated effect.

Online Demo

Source code download

Fixed Link: http://www.i7758.com/archives/1619.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.