跳动的心
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
div{
width: 200px;
height: 200px;background-color: red;
margin:200px auto 0;
transform:rotate(45deg);
position: relative;
/* 名字为heart,持续时间1s,持续不断匀速跳动 */
animation:heart 1s alternate linear infinite;
}
/* 为div加伪元素before和after */
div:before{
/* content必须有 */
content: "";
display: block;
width: 200px;
height: 200px;
/* 使半圆的颜色继承父级,方便变色 */
background-color: inherit;
border-radius: 50%;
position: absolute;
left: -100px;
}
div:after{
content: "";
display: block;
width: 200px;
height: 200px;
background-color: inherit;
border-radius: 50%;
position: absolute;
top: -100px;
}
@keyframes heart{
0%{
transform: rotate(45deg) scale(1);
}
100%{
transform: rotate(45deg) scale(1.5);
/* 不知道为什么自己旋转了,就都加了一个rotate，让他转回来。 */
background-color: #000000;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
