我让 chatgpt 写个心形跳动的 CSS

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 1173 days ago, the information mentioned may be changed or developed.

<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 replies 2023-02-09 12:39:41 +08:00

dengshen

Feb 9, 2023

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

chionetw5 Feb 9, 2023

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

Roooookie

Feb 9, 2023

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

Masonnn

Feb 9, 2023

你就说跳没跳吧

superdotcom

Feb 9, 2023

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

superdotcom

Feb 9, 2023

@WhereverYouGo 能跳，不是心形

Hilong

Feb 9, 2023

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

yuuko

Feb 9, 2023

<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

Feb 9, 2023

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

superdotcom

Feb 9, 2023

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