我让 chatgpt 写个心形跳动的 CSS

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 662 天前的主题，其中的信息可能已经有所发展或是发生改变。

<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

2023-02-09 09:26:08 +08:00

看了一眼, heart 类名有了, 但是这个类名挂在哪里了呢??? 这能用吗?

chionetw5

2023-02-09 09:45:41 +08:00

我跑了一下，虽然不是心形，但是会跳，无敌

yuehui123

2023-02-09 10:05:14 +08:00

@chionetw5 改下 top ，left 值，确实是心形了

WhereverYouGo

2023-02-09 10:10:11 +08:00

你就说跳没跳吧

superdotcom

2023-02-09 10:39:22 +08:00

@yuehui123 怎么改，借我抄一抄，哈哈

superdotcom

2023-02-09 10:40:28 +08:00

@WhereverYouGo 能跳，不是心形

Hilong

2023-02-09 11:06:02 +08:00

要改下位置,确实是跳动的心

yuuko

2023-02-09 11:43:36 +08:00

<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

2023-02-09 11:52:59 +08:00

它没有任何视觉输入的，所以不知道人类说的心形的真实情况，估计是从喂进去的数据里挖出来的 css 心，但去掉 top ，left 后也足够牛皮了

superdotcom

2023-02-09 12:39:41 +08:00

@yuuko 厉害，心形能不能搞成这个样子的🧡