2
我有頁面在這裏有2個元素在它和bootstrap在運行,但我沒有使第一個元素響應。
第一個元素是一個具有Lazy Line Painter路徑動畫的SVG,它拒絕變得對寫入的代碼有反應,當窗口被調整大小時不會移動,我需要幫助。如何使窗口調整大小時使元素移動(引導使用)?
第二個元素是一個標題,它是響應和看起來不錯。
的問題是:我如何獲得的第一個元素表現得像第二,從而響應,而不是固定的(因爲它調整窗口大小時,似乎固定)
HTML:
<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Oswald:700'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Code Home</title>
<!--CSS Start-->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--CSS End-->
<!--Scripts Start-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/jquery.lazylinepainter-1.4.1.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/main.js"></script>
<!--Scripts End-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="pencilandbrackets"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="title" class="animated bounceInDown">The Code Home</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
CSS:
/*=======MAIN CSS=======*/
body {
background:#2ecc71;
}
#pencilandbrackets {
position: absolute;
top:-170px;
left:200px;
display: block;
}
#title {
font-family: 'Oswald', sans-serif;
font-size: 4.13em;
position: fixed;
top:40%;
left:50%;
margin: -1.0em 0px 0px -3.2em;
color: #2c3e50;
display: block;
}
.lazy-line svg {
width:300% !important;
}
我已經更新了這個問題,因爲我沒有清楚地解釋我想要什麼。 – 2014-11-21 15:40:38