关于html元素中心点问题。

如果写一个元素，那么他是从左上开始的，我现在画了一个圆加了点动画，这个圆也是从左上开始，如何把左上位置移动到圆的中心呢？谢谢！

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
         
div{ width:100px;
     height:100px;
     border-radius:50%;
     background:#9CF;
     animation:move linear 3s infinite;
     
}

@keyframes move{
    
0%{width:100px;
   height:100px; }    
    
50%{width:50px;
    height:50px; }
    
50%{width:0px;
    height:0px; }    
    }
</style>
</head>

<body>

<div></div>

</body>
</html>

@keyframes move{

0%{transform: scale(1,1) }

50%{transform: scale(2,2) }

50%{transform: scale(0,0) }

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处，你用的方法不对，
你可以用transform: scale(2,2)去缩放

【热门文章】