Because today's August 28th is the Valentine's Day of China -Tanabata, as a program ape, I only knock on the code at home! But I still have a heart of taking off; I made H5+CSS+JS interface. I wish my friends: Happy Tanabata
The specific functions are:
1. Snow background animation
2. The following text is victy, accompanied by voice
3. Central picture 3D rotation
Attach the source code:
<! Doctype html> <html> <Head> <meta charset = UTF-8> <meta name = keywords content = keywords> <meta name = description content = description information> <Title> Tanaibis Happiness </Title > <!-CSS style layer layer style table-> <Style type = text/css> *{margin: 0; padding: 0;} html, body {width: 100%; height: 100%;} body {backgrount : url (images/3.jpg); background-siZe: Cover; overflow: hidden;}/*Top Start*/.top {width: 400px; height: 100px; 60px Auto; FONT-S ze: 30px; FONT -Family: Chinese line, COLOR: #FFF;} /*Background: -webkit-Linear-Gradient (45Deg,#FF0000,#FF0099,#33FF00,#3300cc,#000000);* /*e nd top *//*Box Start*/ .box {width: 310px; height: 310px; margin: Auto; Perspective: 800px;} .pic {posity: related; -3D;/*Equipped with 3D environment * /Animation: PLAY 10S Linear Infinite;} /*Animation: PLAY speed circulation;* /.BOX ul li {list-style: none; absolute; TOP: 0; left: 0;} /*e ND Box* / #text {width: 500px; height: 200px; margin: auto; color: #6Fade1; Margin: Auto; font-siZe: 24px; font-family: Fang Zheng Meow wow body;} /*Define a key frame* / @ @ / @ Keyframes play {from {transform: rotatey (0Deg);} to {transform: rotatey (360Deg);} </style> </head> <! P> <!-Marquee rolling tag Behaviod = Alternate collision-> <marquee behavior = alternate> Time is not old, we don't disperse </marquee> </div> <!-End Top-> <!-Box Start- > <div class = box> <div class = pic> <ul> <!-Image four factor SRC path width height alt description optimization-> <li> <IMG src = images/1.png width = < li> <IMG SRC = Images/2.png Width = Height = <li> <IMG SRC = Images/3.png Width = Height = <li> <IMG SRC = Images/4.png width = Height = <li> <li> <IMG SRC = Images/5.png Width = Height = <li> <IMG SRC = Images/6.png Width = Height = </Ul> </DIV> <!-End Box-> <div ID = Text> </DIV> <!-Inserting background music-> <emBed src = Jay Chou+-+Confession Balloon .mp3/> <!-Introduce jQuery class library-> <script type = text = text /javascript src = js/jquery-1.11.1.min.js> </script> <!-The snowy animation background JS-> <Script Type = Text/JavaScript SRC = JS/Trans.js> </ script> <script> // Get every Li $ (. PIC UL Li) .each (function (i) {// The rotation angle of each picture is different VAR DEG = 360/$ (. PIC UL li) .size (); // The current li object $ (this) .css ({transform: rotatey (+deg*i+deg) translatez (216px)}); // Call the animation of the snowy animation $ .fn. SNOW ({MINSIZE: 10, MaxSize: 15, Newon: 500, Flakecolor: #fff});}); VAR I = 0; VAR STR = Intercept the galaxy in the sky into the heart of love, flow into you into you In your heart; take off the bridge in the sky, turn into the heart bridge of love, and put it in your heart. Give you the love of your life. Happy Tanabata!!!; // Voice Var Obj = $ ('<udio src = http: //fanyi.baidu.com/gettts? LAN = zh & amp; text ='+str+'& amp ; SPD = 5 & amp; sorce = web autoplay> </umio> '); $ (body) .appnd (obj); window.onload = function typing () {// Get div var = document.getee lementbyid (text); // Implement verbatim display mydiv.innerhtml+= str.charat (i); i ++; // timer var ID = settimeout (type, 100); // determine the STR after displaying the Settimeout if (i == Str.LengthTh ) {Cleartimeout (ID);}} </script> </body> </html> SummarizeThe above is the HTML5+CSS3+JS introduced by Xiaobian to realize the Qixi romance function code. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!