<!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>
翻译
搜索
复制
<iframe></iframe> 标签：color,100px,跳动,height,width,HTML,red,background,CSS From： https://www.cnblogs.com/jw-t/p/18240084