纯css实现不规则hover形状效果-html代码-BFW代码库

代码语言：html

所属分类：悬停

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        body
        {
            background-color: #ebf5fc;
            font-family: 'Rajdhani', sans-serif;
        }
        .box-container
        {
            padding-top: 20px;
            padding-bottom: 20px;
            border-radius: 6px;
            background: #ebf5fc;
            box-shadow: -2px -2px 5px white, 3px 3px 5px rgba(0, 0, 0, 0.1);
            border: 1px solid #c3f9f3;
        }

        .box-container:hover {
            box-shadow: inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1);
        }

        .
        {
            -webkit-animation: rotate-center 4s linear infinite both;
            animation: rotate-center 4s linear infinite both;



        }

        .icon-set-box
        {

            margin: auto;
            text-align: center;
            border: 1px solid #cac8c8;
            padding: 15px;
            border-radius: 50%;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.5098039215686274);
            box-shadow: inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1);
        }


        .box-container .heading-main
        {
            text-align: center;
            text-transform: uppercase;
            padding-top: 20px;
            padding-bottom: 20px;
            letter-spacing: 3px;
            font-weight: bold;
            color: #6b6aa0;
            font-size: 18px;
        }

        .box-container .subheading-box
        {
            text-align: center;
            font-size: 18px;
            color: #635f82;
        }

        .heading-name
        {
            color: #99a9b5;
            text-transform: uppercase;
            font-size: 18px;

        }

        .capsule
        {
            border: 1px solid #dfe5e8;
            border-top-left-radius: 55px;
            border-top-right-radius: 55px;
            border-bottom-right-radius: 55px;
            border-bottom-left-radius: 55px;
        }

        .tag
        {
            border-top-left-radius: 500px;
            border-top-right-radius: 500px;
        }

        .NAUTILUS
        {
            border-top-left-radius: 500px;
            border-top-right-radius: 500px;
            border-bottom-right-radius: 500px;
            border-bottom-left-radius: 500px;
        }

        /**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
            0% {
                -webkit-transform: rotate(0);
                transform: rotate(0);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
@keyframes rotate-center {
            0% {
                -webkit-transform: rotate(0);
                transform: rotate(0);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>

</head>
<body translate="no">
    <div class="container">
        <div class="row mt-5 mb-5">
            <div class="col-md-3 col-sm-3">
                <div class="col-md-12 text-center mb-4">
                    <span class="heading-name">Box</span>
                </div>
                <div class="box-container">
                    <div class="col-md-12">
                        <div class="icon-set-box">
                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                <g id="Rfan1">
                                    <path id="fan1" style="fill:#EEEEEE;" d="M226.425,157.47c0-1.411,0.105-2.797,0.294-4.157L65.313,128.649
                                        c-4.184,27.312,34.645,55.904,86.727,63.863c34.703,5.303,66.528,0.104,85.145-12.033
                                        C230.609,174.973,226.425,166.711,226.425,157.47z" />
                                    <path id="fan2" style="fill:#EEEEEE;" d="M275.533,134.255L383.844,17.92c-20.261-18.814-65.77-2.827-101.648,35.709
                                        c-23.662,25.415-37.217,54.287-37.897,76.401c3.725-1.652,7.844-2.577,12.182-2.577
                                        C263.713,127.453,270.347,130.005,275.533,134.255z" />
                                    <path style="fill:#EEEEEE;" d="M286.148,162.281c-1.827,11.318-9.985,20.52-20.734,23.857L324.84,334.37
                                        c25.684-10.27,30.629-58.195,11.046-107.045C323.682,196.886,304.835,173.274,286.148,162.281z" />
                                </g>
                                <ellipse style="fill:#69CAEE;" cx="256.48" cy="157.47" rx="30.06" ry="30.02" />
                                <path style="fill:#CBC2BA;" d="M265.414,186.139c0.088-0.027-5.726,1.348-8.933,1.348c-7.699,0-14.72-2.895-20.038-7.649v274.479
                                    c6.842,0.887,13.27,2.102,17.477,3.606c5.874-4.398,13.71-8.256,22.598-11.458V213.838L265.414,186.139z" />
                                <path d="M461.906,491.768c0,0-21.547,0-21.555,0c-3.808-0.052-6.383-9.115-7.85-11.858c-9.805-18.338-27.808-33.362-46.267-42.482
                                    c-15.169-7.494-31.88-11.287-49.673-11.287h-0.07c-16.757,0.012-33.776,2.39-49.953,6.746V265.749c0,0,28.909,72.11,29.001,72.34
                                    c1.968,4.908,8.1,7.541,13.025,5.57c16.047-6.416,26.254-23.22,28.741-47.318c2.249-21.801-2.054-47.632-12.118-72.735
                                    c-11.499-28.685-29.395-53.029-48.643-66.515c-0.08-8.473-2.814-16.314-7.405-22.755L391.181,24.733
                                    c3.768-4.047,3.537-10.378-0.........完整代码请登录后点击上方下载按钮下载查看