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

纯css实现不规则hover形状效果

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看