CSS画圆以及CSS实现动态圆
要使用CSS画圆，可以使用border-radius属性将一个正方形或矩形元素变成圆形。
.circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%; /* 使得宽和高相同的正方形变成圆形 */
}
<div class="circle"></div>对于CSS实现动态圆，可以使用CSS动画或变换来实现圆的动态效果。
.dynamic-circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
animation: scale-up 2s infinite alternate ease-in-out;
}
@keyframes scale-up {
from {
transform: scale(1);
}
to {
transform: scale(1.5); /* 放大为原来的1.5倍 */
}
}
<div class="dynamic-circle"></div>在这个例子中，.dynamic-circle类将使得圆形周期性地放大到原来的1.5倍，缩小回原大小，这个动画将无限循环。
评论已关闭