扇形扩散效果css36

扇形扩散效果是CSS3中的一种特效，可以给网页增加视觉上的动态效果，让页面更加生动有趣。使用CSS3实现扇形扩散效果非常简单，只需按照以下步骤即可。

/*定义扇形扩散元素样式*/.fan{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
}
/*定义扩散动画*/@keyframes fan{
0%{
     transform: scale(0);
     opacity: 0;
}
100%{
     transform: scale(1);
     opacity: 1;
}
}
/*定义扇形扩散背景*/.fan::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transform-origin: center bottom;
}
/*定义扇形扩散动画*/.fan:hover::before{
    animation: fan 1s ease-out;
}
    

以上就是实现扇形扩散效果的CSS代码，通过给扇形扩散元素添加before伪元素，并定义动画效果，当鼠标悬停在元素上时触发动画，就可以实现扇形扩散效果。

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