css+js实现炫酷卡片悬浮动画效果代码-html代码-BFW代码库

css+js实现炫酷卡片悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css+js实现炫酷卡片悬浮动画效果代码

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

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

<head>
    <meta charset="UTF-8">

    <style>
        * { box-sizing: border-box;}
    
    body {
        font-family: sans-serif;
        color: white;
        background-color: rgb(1, 40, 51);
        text-align: center;
        padding-top: 2em;
    }
    .card {
        position: relative;
        display: inline-block;
        border-radius: 10px;
        width: 250px;
        padding: 20px;
        overflow: hidden;
        cursor: pointer;
        text-align: left;
    }
    .svg-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 120%;
        height: 120%;
        z-index: -1;
    }
    .blob {
        transform: translate(23%,3%) scale(0.65);
        fill: rgb(15, 59, 64);
        transition: 0.4s;
    }
    .card.active .blob {
        fill: rgb(19, 89, 79);
        transform: translate(23%,3%) scale(3.75);
    }
    .card.active .bg-overlay {
        opacity: 0;
    }
    
    .circular-border {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: rgb(12, 51, 57);
        position: relative;
    }
    i {
        font-style: normal;
        font-size: 35px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    a {
        color: inherit;
        text-decoration: none;
    }
    p {
        opacity: 0;
        transition: 0.4s;
    }
    .card.active p {
        opacity: 1;
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="card active">
        <svg class="svg-background" viewBox="0 0 600 600">
        <path class="blob" d="M192.1,-148.2C230,-105.8,228.6,-27,204.4,33.7C180.2,94.3,133.3,136.8,77.7,165C22.1,193.1,-42.1,206.9,-94.5,185.7C-146.9,164.5,-187.5,108.3,-201.7,46C-215.9,-16.2,-203.7,-84.5,-165.7,-127C-127.7,-169.5,-63.8,-186.3,6.6,-191.6C77.1,-196.9,154.3,-190.7,192.1,-148.2Z"></path>
    </svg>

        <div class="top-section">
            <div class="circular-border">
                <i>✌</i>
            </div>
        </div>
        <h2>Energy destabilization</h2>
        <p>An innovative approach to energy production, storage, and distribution adapted for each community needs.</p>

        <p><a href.........完整代码请登录后点击上方下载按钮下载查看