效果
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
/* 设置元素充满整个页面 */
margin: 0;
padding: 0;
}
html,body{
/* 宽高占满屏幕 */
width: 100%;
height: 100%;
}
body{
/* 设置背景颜色 */
background-color: plum;
/* 该元素设置弹性盒子 */
display: flex;
/* 调整摆放位置 */
flex-direction: row;
/* 水平垂直居中 */
align-items: center;
justify-content: center;
}
.heart{
/* 实现一个正方形 */
width: 200px;
height: 200px;
background-color: pink;
/* 设置相对定位,使后面的形状随父元素移动 */
position: relative;
/* 顺时针旋转45度 */
transform: rotate(45deg);
/* 实现动画效果 */
animation:heartbit 0.5s alternate infinite;
/* 设置阴影效果 */
box-shadow:0 0 80px rgb(236, 51, 178) ;
}
.heart::before{
/* 设置一个伪元素在这里添加半圆 */
content: "";
width: 200px;
height: 100px;
background-color: pink;
/* 设置定位后元素显示 */
position: absolute;
left: 0;
top: -99px;
/* 设置圆角效果 */
border-radius: 100px 100px 0 0;
}
.heart::after{
/* 设置一个伪元素在这里添加另一个半圆 */
content: "";
width: 100px;
height: 200px;
background-color:pink;
/* 设置定位后元素显示 */
position: absolute;
left: -99px;
top: 0px;
/* 设置圆角效果 */
border-radius: 100px 0px 0px 100px;
}
/* 设置动画,让心跳动起来 */
@keyframes heartbit {
0%{
/* 当开始时缩放为当前大小的0.6倍 */
transform: rotate(45deg) scale(0.6);
}
/* 25%{
transform: rotate(45deg) scale(0.8);
}
50%{
transform: rotate(45deg) scale(1);
}
75%{
transform: rotate(45deg) scale(1.2);
} */
100%{
transform: rotate(45deg);scale: (1.4);
}
}
h2{
font-size: 10em;
position: absolute;
top: 200px;
color: purple;
}
</style>
</head>
<body>
<div class="heart"></div>
<h2>LOVE YOU</h2>
</body>
</html>