我想复制这个家伙所做的，但不使用画布。我想在页面中央放置一个div，然后将宽度/高度/边框半径每秒增加10px。这个效果很好，但是由于某些原因，div越大，它向右下方移动的越多。圆不是静止不动的，它的中心位置随着变大而变化。如何在不更改位置的情况下更改div的宽度/高度？
main.css
div {
background-color: green;
width: 100px;
height: 100px;
border-radius: 100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
index.html
<!DOCTYPE html>
<head>
<title>CircleTime</title>
<link rel="stylesheet" href="main.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div></div>
</body>
</html>
咖啡
incrementCircle = ->
newSize = circle.height() + 10
circle.height newSize
circle.width newSize
circle.css 'border-radius', newSize
$(document).ready ->
window.circle = $("div")
setInterval(incrementCircle, 1000);
在您的coffeescript中，继续像这样更新边距：
incrementCircle = ->
newSize = circle.height() + 10
circle.height newSize
circle.width newSize
circle.css 'border-radius', newSize
circle.css 'margin-top', newSize/-2
circle.css 'margin-left', newSize/-2
$(document).ready ->
window.circle = $("div")
setInterval(incrementCircle, 1000);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句