css动画从中心开始扩散
时间: 2023-10-28 21:20:29 浏览: 97
可以使用CSS3的transform属性以及伪元素实现从中心开始扩散的动画效果。具体实现步骤如下:
1. 首先需要创建一个扩散的圆形元素。可以使用伪元素:before或:after来创建,并设置其大小和圆角属性。
2. 通过transform属性将元素的尺寸设置为0,同时将其位置移动到页面中心位置。
3. 定义一个CSS3动画,通过transform的scale属性将元素的大小逐渐增大,直到达到所需的大小。
下面是一个示例代码实现:
```html
<div class="circle"></div>
```
```css
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ff0000;
animation: expand 1s ease-out forwards;
}
@keyframes expand {
0% {
transform: translate(-50%, -50%) scale(0);
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
```
在上述代码中,我们通过设置圆形的宽高为100px,并将其半径设置为50%实现了一个圆形。然后通过transform属性将其缩小到0,并将其位置移动到页面中心。最后定义一个名为expand的动画,通过transform的scale属性逐渐将其放大到4倍,并将元素的透明度设置为0,实现了从中心开始扩散的动画效果。