美文网首页
CSS3+SVG练习:果冻菜单

CSS3+SVG练习:果冻菜单

作者: 0清婉0 | 来源:发表于2021-03-17 20:10 被阅读0次

    很酷的一个菜单效果,收藏,可以用作项目

    <div class="blobs">

        <div class="circle main"></div>

        <div class="circle sub first"></div>

        <div class="circle sub second"></div>

        <div class="circle sub last"></div>

    </div>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

        <defs>

            <filter id="goo">

                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />

                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />

                <feBlend in="SourceGraphic" in2="goo" />

            </filter>

        </defs>

    </svg>

    .blobs{

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 0;

        left: 0;

        bottom: 0;

        right: 0;

        font-size: 10px;

        filter: url(#goo);

    }

    .circle{

        position: absolute;

        width: 9em;

        height: 9em;

        transform: translate(0, -48px);

        background: hsl(337, 70%, 58%);

        clip-path: circle(42px at center);

    }

    .circle.main::before{

        position: absolute;

        content:'';

        width: 35px;

        height: 5px;

        background: rgb(255, 255, 255);

        border-radius: 15px;

        top:calc(50% - 2.5px);

        left:calc(50% - 17.5px);

    }

    .circle.main::after{

        position: absolute;

        content:'';

        width: 35px;

        height: 5px;

        background: rgb(255, 255, 255);

        border-radius: 15px;

        transform: rotate(90deg);

        top:calc(65% - 17.5px);

        left:calc(36% - 2.5px);

    }

    .circle.main{

        z-index: 2;

    }

    .circle.first{

        transition: transform 0.5s 100ms ease-out;

        background: hsl(307, 70%, 58%);

    }

    .circle.first.show{

        transform: translate(-100px, -120px);

    }

    .circle.second{

        transition: transform 0.5s 300ms ease-out;

        background: hsl(277, 70%, 58%);

    }

    .circle.second.show{

        transform: translate(0px, -150px);

    }

    .circle.last{

        transition: transform 0.5s 500ms ease-out;

        background: hsl(247, 70%, 58%);

    }

    .circle.last.show{

        transform: translate(100px, -120px);

    }

    $(document).ready(function() {

        $(".main").click(function(){

            $("div.sub").each(function(){

                $(this).toggleClass("show");

            })

        })

    });

    相关文章

      网友评论

          本文标题:CSS3+SVG练习:果冻菜单

          本文链接:https://www.haomeiwen.com/subject/skoecltx.html