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