V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
superdotcom
V2EX  ›  OpenAI

我让 chatgpt 写个心形跳动的 CSS

  •  
  •   superdotcom · 2023-02-09 09:07:22 +08:00 · 3957 次点击
    这是一个创建于 688 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <html> <head> <title>1</title> <style type="text/css"> .heart { width: 50px; height: 50px; position: relative; margin: 50px auto; }

    .heart:before, .heart:after { content: ""; position: absolute; top: 20px; left: 25px; width: 25px; height: 25px; background: #f00; border-radius: 25px 25px 0; transform: rotate(45deg); transform-origin: 0 100%; }

    .heart:after { left: 0; transform: rotate(-45deg); transform-origin: 100% 100%; }

    @keyframes heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } }

    .heart.beat { animation: heartBeat 1s infinite; }

    </style> </head> <body>
    </body> 这是个啥心形啊!我晕,不过确实蛮厉害
    10 条回复    2023-02-09 12:39:41 +08:00
    dengshen
        1
    dengshen  
       2023-02-09 09:26:08 +08:00
    看了一眼, heart 类名有了, 但是这个类名挂在哪里了呢??? 这能用吗?
    chionetw5
        2
    chionetw5  
       2023-02-09 09:45:41 +08:00
    我跑了一下,虽然不是心形,但是会跳,无敌
    yuehui123
        3
    yuehui123  
       2023-02-09 10:05:14 +08:00
    @chionetw5 改下 top ,left 值,确实是心形了
    WhereverYouGo
        4
    WhereverYouGo  
       2023-02-09 10:10:11 +08:00
    你就说跳没跳吧
    superdotcom
        5
    superdotcom  
    OP
       2023-02-09 10:39:22 +08:00
    @yuehui123 怎么改,借我抄一抄,哈哈
    superdotcom
        6
    superdotcom  
    OP
       2023-02-09 10:40:28 +08:00
    @WhereverYouGo 能跳,不是心形
    Hilong
        7
    Hilong  
       2023-02-09 11:06:02 +08:00
    要改下位置,确实是跳动的心
    yuuko
        8
    yuuko  
       2023-02-09 11:43:36 +08:00   ❤️ 2
    <html>
    <head>
    <title>1</title>
    <style type="text/css">
    .heart {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 50px auto;
    }
    .heart:before,
    .heart:after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background: #f00;
    border-radius: 25px 25px 0;
    }

    .heart:after {
    left: 15px;
    transform: rotate(70deg);
    }

    .heart:before {
    left: 0;
    transform: rotate(20deg);
    }

    @keyframes heartBeat {
    0% {
    transform: scale(1);
    }
    14% {
    transform: scale(1.3);
    }
    28% {
    transform: scale(1);
    }
    }

    .heart.beat {
    animation: heartBeat 1s infinite;
    }
    </style>
    </head>
    <body>
    <div class="heart beat"></div>
    </body>
    </html>


    改下位置,跳动🧡
    lookStupiToForce
        9
    lookStupiToForce  
       2023-02-09 11:52:59 +08:00
    它没有任何视觉输入的,所以不知道人类说的心形的真实情况,估计是从喂进去的数据里挖出来的 css 心,但去掉 top ,left 后也足够牛皮了
    superdotcom
        10
    superdotcom  
    OP
       2023-02-09 12:39:41 +08:00
    @yuuko 厉害,心形能不能搞成这个样子的🧡
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   930 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:54 · PVG 05:54 · LAX 13:54 · JFK 16:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.