我想放大一个圆（div），直到它通过“相机”为止。我已经尝试过透视，但是那没有用。至少我使用它的方式。这是我的HTML：
:<html>
<body>
<div class="test"></div>
</body>
</html>
这是我的CSS：
.test{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:2px solid coral;
width:100px;
height:100px;
border-radius:50%;
}
有没有办法做到这一点？
这是没有任何js的方法。但是请注意，根据您自己的项目调整.wraper的高度。
.wraper {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
}
.circle {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
right: 50%;
transform: translateX(50%) translateY(-50%);
border-radius: 50%;
border: 2px solid #000;
animation-name: example;
animation-duration: 15s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes example {
0% {width: 30px; height: 30px;}
100% {width: 3000px; height: 3000px;}
}<div class="wraper">
<div class="circle">
</div>
</div>请尝试
.test:hover{
transform: scale(1.5);
}<div class="test"></div>使用
transform: scale(1.5, 1.5);