HTML5 + Canvas + CSS3: Achieve the yunyun Effect of Sun Wukong, html5css3
Sun Wukong painted with HTML5 canvas, and the white clouds painted with CSS3 floated.
:
The Code is as follows:
Copy the content to the clipboard using CSS Code.
- <! Doctype html>
- <Html>
- <Head>
- <Meta charset = "UTF-8">
- <Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">
- <Meta name = "description" content = "">
- <Meta name = "viewport" content = "width = device-width, initial-scale = 1">
- <Title> HTML5 + CSS3 implement Qi tianda shengteng cloud driving fog </title>
- <Style type = "text/css">
- *{
- Margin: 0;
- Padding: 0;
- Border: 0;
- }
- Html, body {
- Margin: 0;
- }
- @-Webkit-keyframes STAR-MOVE {
- From {
- Background-position: 0% 0%;
- }
- To {
- Background-position: 600% 0%;
- }
- }
- @ Keyframes STAR-MOVE {
- From {
- Background-position: 0% 0%;
- }
- To {
- Background-position: 600% 0%;
- }
- }
- . Wall {
- Position: absolute;
- Top: 0;
- Left: 0;
- Bottombottom: 0;
- Rightright: 0;
- }
- Div # background {
- Background: black url ('HTTP: // hovertree.com/texiao/html5/30/img/background.png') repeat-x 5% 0%;
- Background-size: cover;
- -Webkit-animation: STAR-MOVE 200 s linear infinite;
- -Moz-animation: STAR-MOVE 200 s linear infinite;
- -Ms-animation: STAR-MOVE 200 s linear infinite;
- Animation: STAR-MOVE 200 s linear infinite;
- }
- Div # midground {
- Background: url ('HTTP: // hovertree.com/texiao/html5/30/img/midground.png') repeat 20% 0%;
- Z-index: 1;
- -Webkit-animation: STAR-MOVE 100 s linear infinite;
- -Moz-animation: STAR-MOVE 100 s linear infinite;
- -Ms-animation: STAR-MOVE 100 s linear infinite;
- Animation: STAR-MOVE 100 s linear infinite;
- }
- Div # foreground {
- Background: url ('HTTP: // hovertree.com/texiao/html5/30/img/foreground.png') repeat 35% 0%;
- Z-index: 2;
- -Webkit-animation: STAR-MOVE 50 s linear infinite;
- -Moz-animation: STAR-MOVE 50 s linear infinite;
- -Ms-animation: STAR-MOVE 50 s linear infinite;
- Animation: STAR-MOVE 50 s linear infinite;
- } # Hovertreewk {position: absolute; z-index: 9999; top: 0px; bottombottom: 0px; left: 0px; rightright: 0px; margin: auto ;}
- </Style>
- </Head>
- <Body>
- <Div style = "text-align: center; position: absolute; z-index: 9; color: white">
- <Div id = "background" class = "wall"> </div>
- <Div id = "midground" class = "wall"> </div>
- <Div id = "foreground" class = "wall"> </div>
- <Canvas width = "650" height = "478" id = "hovertreewk"> </canvas>
- <Script src = "http://hovertree.com/texiao/html5/30/js/hovertreewk.js"> </script>
- </Body>
- </Html>
We have finished introducing the HTML5 + Canvas + CSS3 code for achieving the legend of Sun Wukong, and hope to help you!
