使用css和阿里巴巴矢量图制作一个简单的表白方式

本文链接：https://blog.csdn.net/KB0824liu/article/details/129824266
<link rel="stylesheet" href="./love/iconfont.css">
    <style>
        .wrapper {
            width: 500px;
            height: 500px;
            border-radius: 50px;
            margin: 0 auto;
        }
        .liu {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: blue;
            position: relative;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
        }

        .liu:hover .zhenzhen {
            font-size: 100px;
            transition: 1.314s;
            color: red;
        }

        .liu:nth-of-type(1) {
            left: 200px;
            top: 200px;
        }

        .liu:nth-of-type(1):hover {
            background-color: whitesmoke;
        }

        .liu:nth-of-type(2) {
            left: 300px;
        }

        .liu:nth-of-type(2):hover {
            background-color: #f80101;
        }

        .liu:nth-of-type(3) {
            left: 100px;
            top: -100px;
        }

        .liu:nth-of-type(3):hover {
            background-color: #f17272;
        }

        .liu:nth-of-type(4) {
            left: 100px;
        }

        .liu:nth-of-type(4):hover {
            background-color: #fa1fdd;
        }

        .liu:nth-of-type(5) {
            left: 300px;
            bottom: 100px;
        }

        .liu:nth-of-type(5):hover {
            background-color: #06f5f5;
        }

        .liu:nth-of-type(6) {
            bottom: 500px;
        }

        .liu:nth-of-type(6):hover {
            background-color: #07ec13;
        }

        .liu:nth-of-type(7) {
            bottom: 400px;
        }

        .liu:nth-of-type(7):hover {
            background-color: #84f800;
        }

        .liu:nth-of-type(8) {
            bottom: 300px;
        }

        .liu:nth-of-type(8):hover {
            background-color: #0c70f3;
        }

        .liu:nth-of-type(9) {
            bottom: 400px;
            left: 200px;
        }

        .liu:nth-of-type(9):hover {
            background-color: #1ae707;
        }

        .liu:nth-of-type(10) {
            bottom: 500px;
            left: 400px;
        }

        .liu:nth-of-type(10):hover {
            background-color: #33ff0a;
        }

        .liu:nth-of-type(11) {
            bottom: 800px;
            left: 400px;
        }

        .liu:nth-of-type(11):hover {
            background-color: #a197fc;
        }

        .liu:nth-of-type(12) {
            bottom: 1100px;
            left: 200px;
        }

        .liu:nth-of-type(12):hover {
            background-color: #c505f5;
        }

        .liu:nth-of-type(13) {
            bottom: 1200px;
            left: 400px;
        }

        .liu:nth-of-type(13):hover {
            background-color: #94edf0;
        }

        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .zhenzhen {
            font-size: 50px;
            text-align: center;
        }
        .mei:hover ~.liu>.zhenzhen{
            font-size: 100px;
            transition: 5.21s;
            transform: rotate(1800deg);
        }
        
    </style>
</head>

<body>
    <div class="wrapper">   
        <div class="liu mei"><span class="iconfont zhenzhen icon-w_aixin"></span></div>
        <div class="liu">
            <svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg>
        </div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg>
        </div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
        <div class="liu"><svg class="icon zhenzhen" aria-hidden="true">
                <use xlink:href="#icon-bixin"></use>
            </svg></div>
    </div>
</body>
<script src="./love/iconfont.js"></script>