我让 chatgpt 写个心形跳动的 CSS

2023-02-09 09:07:22 +08:00
 superdotcom
<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> 这是个啥心形啊！我晕，不过确实蛮厉害
3925 次点击
所在节点    OpenAI
10 条回复
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 厉害，心形能不能搞成这个样子的🧡

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/914448

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX