HTML+CSS 生成跳动的心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动的心</title>
<style>
* {
padding: 0;
margin: 0;
}
/* 让容器的宽度和高度都充满全屏 */
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.heart {
width: 150px;
height: 150px;
background-color: red;
position: relative;
/* 将心旋转45° */
transform: rotate(45deg);
animation: heartBit 0.7s alternate infinite;
/* 添加阴影效果 (x , y 模糊度,阴影颜色) */
box-shadow: 0 0 30px red;
}
/* :before 选择器向选定元素的最后子元素后面插入内容。 */
.heart::before {
content: "";
width: 150px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
/* 设置成-99 是为了防止让半圆与正方形进行重合后出现一条中间线 */
top: -99px;
/* 左上角.右上角,右下角.左下角 */
border-radius: 100px 100px 0 0;
box-shadow: 0 0 30px red;
}
/* :after 选择器向选定元素的最后子元素后面插入内容。 */
.heart::after {
content: "";
width: 100px;
height: 150px;
background-color: red;
position: absolute;
/* 设置成-99 是为了防止让半圆与正方形进行重合后出现一条中间线 */
left: -99px;
top: 0;
border-radius: 100px 0 0 100px;
box-shadow: 0 0 30px red;
}
/* 实现动画效果.让心跳动起来 */
@keyframes heartBit {
0% {
transform: rotate(45deg) scale(0.6);
}
1000% {
transform: rotate(45deg) scale(1);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律