css3圆心放大（css中心放大）

CSS3是CSS的新版本，它加入了许多新的特性和属性。其中一个新特性是圆心放大（scale）。圆心放大是指在一个圆形的中心点处，对整个元素进行一个放大的效果。下面我们来看一下如何实现CSS3的圆心放大效果。

.circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f00;
    position: relative;
}
.circle:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s ease;
}
.circle:hover:before {
    transform: translate(-50%, -50%) scale(1);
}
    

以上代码中，我们先创建一个圆形的元素，并且通过伪元素:before来创建一个宽高都为100%的圆形遮罩层，并将它放置在圆形居中位置。接着，我们给圆形遮罩层设置了一个初始的缩放大小0，同时设置了一个缩放变换的过渡效果。当鼠标悬停在圆形上时，使用:hover伪类选择器触发transition过渡效果，将缩放大小变为1，从而实现了圆心放大的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！