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

代码语言:html

所属分类:悬停

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

代码标签: 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;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0