css同心圆扩散

最新推荐文章于 2022-12-15 09:43:59 发布

weixin_43966308

最新推荐文章于 2022-12-15 09:43:59 发布

阅读量463

点赞数

分类专栏： css布局

本文链接：https://blog.csdn.net/weixin_43966308/article/details/103256691

版权

同心圆扩散要点：
定位：每个圆形定位要相同，因为为了达到同心圆扩散的效果有一个定宽定高的圆形，剩下的圆形通过缩放和透明的改变而改变，因此必须保证定位的位置相同

为了达到垂直居中的效果，可以通过transfrom(-50%,-50%),但是因为需要通过transfrom的缩放来达到扩散的效果，因此会发现之前水平垂直的效果没有达到，因为被动画中的trasnfrom缩放的语句覆盖了
可以通过margin 负值宽高的一半来实现位移

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type='text/css'>
    .circle {
        /*创建一个盒子*/
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
       transform: translate(-50%,-50%);
    }

    .circle1,
    .circle2,
    .circle3
     {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
        /* transform: translate(-50%,-50%); *//*因为后面动画也会用到transfrom,因此此处的trasnfrom会被覆盖，因此不能transfrom*/
        width: 100px;
        hei

最低0.47元/天解锁文章

weixin_43966308

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css同心圆扩散

同心圆扩散要点：定位：每个圆形定位要相同，因为为了达到同心圆扩散的效果有一个定宽定高的圆形，剩下的圆形通过缩放和透明的改变而改变，因此必须保证定位的位置相同为了达到垂直居中的效果，可以通过transfrom(-50%,-50%),但是因为需要通过transfrom的缩放来达到扩散的效果，因此会发现之前水平垂直的效果没有达到，因为被动画中的trasnfrom缩放的语句覆盖了<!DOCTY...
复制链接

扫一扫