vask0 Posted April 16, 2017 Share Posted April 16, 2017 Hello people will help me to divide the css code of html file, I css file is in Odell Html css JS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Yahoo Dynamic HTML Banner Example</title> <link rel="stylesheet" href="style.css"> <!-- update the paths to the Greensock source --> </head> <body> <style type="text/css"> .a {position:absolute;} .o {overflow:hidden;} .f {font-family:Arial, Helvetica, sans-serif; font-weight:bold;} </style> <div id="yahoo_bannerContainer" class="a o" style="width:300px; height:250px; border-color:#666; border-style:solid; border-width:thin"> <div id="bg1" class="a" style="width:300px; height:250px; background-image:url(bg1.jpg); z-index:1;"></div> <div id="www" class="a" style="width:117px; height:74px; background-image:url(www.png); z-index:2; top: 11px; left: 5px;"></div> <div id="com" class="a" <p>ddsadasda </p> </div> <div id="title" class="a f" style="z-index:3; top: 90px; left: 0px; font-size:26px; color:#fff; width:300px;; text-align:center;">Здравейте<br />КА СТЕ </div> <div id="bg2" class="a" style="width:300px; height:250px; background-image:url(bg1.jpg); z-index:5;"></div> <div id="tag" class="a f"style="z-index:6; left:18px; top:10px; line-height:1.2em; font-size:24px; color:#7c019a;">ДСАФСДАФДСА<br />Добре дошли—<br />Заповядайте при нас</div> <div id="ysb" class="a" style="z-index:7; background-image:url(ysb.jpg); width:300px; height:59px; left: 0px; top: 191px;"></div> </div> <script type="text/javascript"> function getElem(id){ return document.getElementById(id); } var scon = getElem('bg1'); var stars = []; var sCnt = 0; function star(x,y){ scon.innerHTML += '<img id="star'+sCnt+'" src="star.png" style="position:absolute; left:'+x+'px; top:'+y+'px;" />'; sCnt++; stars.push('star'+sCnt); } function makeStars(){ var i = 0; var max = 40; for(i = 0; i < max; i++){ star( Math.floor(Math.random()*300) , Math.floor(Math.random()*140) ) ; } setTimeout('tweenStars()', 200); } function tweenStars(){ var i = 0; var max = stars.length - 1; var dur = 8; var tog = true; var s = null; for(i = 0; i < max; i++){ tog = !tog; TweenLite.to(getElem(stars[i]), (dur + Math.floor(Math.random()*12)), { css:{rotation:(tog == true ? 720 : -720)} }); } } makeStars(); var seq = new TimelineLite(); seq.append( TweenLite.from(getElem('bg1'), 1, {css:{alpha:0}}) ); seq.append( TweenLite.from(getElem('www'), 0.8, {css:{alpha:0}}) ); seq.append( TweenLite.from(getElem('com'), 0.8, {css:{alpha:0}}) ); seq.append( TweenLite.from(getElem('title'), 0.7, {delay:0.4, css:{alpha:0}}) ); seq.append( TweenLite.from(getElem('bg2'), 1.1, {delay:1.5, css:{top:310}}) ); seq.append( TweenLite.from(getElem('tag'), 0.7, {css:{left:-310}}) ); seq.append( TweenLite.from(getElem('ysb'), 0.6, {css:{top:310}}) ); seq.append( TweenLite.from(getElem('reg'), 0.7, {css:{top:310}}) ); seq.play(); </script> </body> </html> 10X Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now