9 HTML5/CSS3 examples and source code that make your eyes shine, html5css3
1. HTML5 3D dot matrix rolling Animation
Today, we will share another HTML5-based 3D dot matrix Column Wave tumble animation effect, which is also very spectacular.
Online Demo
Source code download
2. HTML5 ball bounce animation is a good 3D ball.
Today, I want to share with you a very realistic HTML5 animation special effect. It is a bounce ball with three different colors. Each ball will change its projection when it is bounce, make the entire animation more realistic and have 3D visual effects.
Online Demo
Source code download
3. Temple animation stacked with pure CSS3 paper
The pure CSS3 animation to be shared today is very special. The prototype of the animation subject is the roof of a temple. It is made of three pieces of paper and a small ball. First of all, I have to say, the simple four elements of the temple are very lifelike. Secondly, the temple roof is combined to form a very cool flying animation using CSS3 technology.
Online Demo
Source code download
4. jQuery/CSS3 voting result chart horizontal columnar chart
This is a voting result display Chart Based on jQuery and CSS3. Unlike the HTML5 columnar chart introduced earlier, this chart is a horizontal columnar chart. The chart data is initialized with animated effects that slide slowly. This horizontal columnar image is ideal for voting applications.
Online Demo
Source code download
5. HTML5/SVG regional line charts display chart data items
Today we will share a chart application based on HTML5 and SVG. This chart uses a region block to represent a type of data and a region line to represent the range of the data in the chart, each area can define its own color, which can make the chart data very clear. In addition, you only need to move the mouse over the area line to display the chart data details of the coordinate point.
Online Demo
Source code download
6. SVG achieves filling color of hollow-out animation icons
This is an SVG-based hollow-out animated icon. the icon is drawn using the path label of SVG. This example shows three different things: Basketball, twitter logo, and pig. When you move the mouse over the icon, the hollow part of the icon will be filled with a color gradient, the effect is very good.
Online Demo
Source code download
7. Slide left and right with the pure CSS3 3D switch button
This time we will look at a very cool CSS3 3D switch button. click the button to slide left and right, just as if the switch was closed.
Online Demo
Source code download
8. HTML5 Canvas columnar charts can compare multiple data items
Today, we will share another bar chart based on HTML5 Canvas. This bar chart can compare multiple pieces of data at the same time, and its appearance is fairly general. You can customize CSS by yourself.
Online Demo
Source code download
9. Four sets of happy CSS3 Loading animations
Today, we want to share four groups of happy CSS3 Loading animations. These four animations are in the same mode, A group of small balls form various arrangement in the big ball to achieve the effect of Loading the animation.
Online Demo
Source code download
The Code is as follows. IE is not supported. use FireFox or Safair to check the effect.
Here we mainly apply several functions of CSS3, the border "border-radius", and the pseudo class selector "E: nth-child (n )". The pseudo class "E: hover" is not a new feature of CSS3. Its function is to change the style when the mouse is hovering over the E element.
Thank you!
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/css">
. Radius {
Border-width: 1px;
Border-style: solid;
-Moz-border-radius: 11px;
-Khtml-border-radius: 11px;
-Webkit-border-radius: 11px;
Border-radius: 11px;
Padding: 5px;
}
. Radius th {background-color: # 0000ff; color: # ffffff ;}
. Radius tr: nth-child (odd) {background-color: # FF0000 ;}
. Radius tr: nth-child (even) {background-color: #00ff00 ;}
. Radius tr: hover {background-color: # FF0 ;}
</Style>
</Head>
<Body>
<Table width = "200" class = "radius">
<Tr>
<Th> 1 </th>
<Th> 2 </th>
<Th> 3 </th>
</Tr>
<Tr>
<Td> 3 </td>
<Td> 4 </td>
<Td> 5 </td>
</Tr>
<Tr>
<Td> 5 </td>
<Td> 6 </td>
<Td> 7 </td>
</Tr>
<Tr>
<Td> 7 </td>
<Td> 8 </td>
<Td> 9 </td>
</Tr>
<Tr>
<Td> 0 </td>
<Td> 1 </td>
<Td> 2 </td>
</Tr &... the remaining full text>
Html5/CSS3 create a table
I wrote you a simple curriculum style table.
Take a look
<Style type = "text/css">
Table {border-collapse: collapse; text-align: center; vertical-align: middle ;}
Table tr {height: 25px ;}
Table td {width: 100px ;}
. Bg1 {background: # ccc ;}
Table tr: hover {background: # 09C ;}
. Bg2 {background: #999 ;}
. T1,. t2,. t3,. t4,. b1,. b2,. b3,. b4,. tab {display: block; overflow: hidden ;}
. T1,. t2,. t3,. b1,. b2,. b3 {height: 1px ;}
. T2,. t3,. t4,. b2,. b3,. b4,. tab {border-left: 2px solid # f6f; border-right: 2px solid # f6f ;}
. T1,. b1 {margin: 0 5px; background: # F6F ;}
. T2,. b2 {margin: 0 3px; border-width: 2px ;}
. T3,. b3 {margin: 0 2px ;}
. T4,. b4 {height: 2px; margin: 0 1px ;}
. Tab {height: 130px; background: # F7F8F9 ;}
. Tab_width {width: 700px; margin: 0 auto; cursor: pointer ;}
</Style>
<Div class = "tab_width">
<B class = "t1"> </B> <B class = "t2"> </B> <B class = "t3"> </B> <B class = "t4"> </B>
<Div class = "tab">
<Table>
<Tr>
<Td> Monday </td>
<Td> Tuesday </td>
<Td> Wednesday </td>
<Td> Thursday </td>
<Td> Friday </td>
<Td> Saturday </td>
<Td> Sunday </td>
</Tr>
<Tr class = "bg1">
<Td> Chinese Learning </td>
<Td> mathematics </td>
<Td> English </td>
<Td> multimedia </td>
<Td & g ...... remaining full text>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
