css3画一个跳动的红心
Posted 小小前端路
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3画一个跳动的红心相关的知识，希望对你有一定的参考价值。
之前就跟学生说可以用css3画一个跳动的红心，今天就给大家实现一下。
直接复制到代码编辑器里面就可以使用了。其他的大家可以自己根据自己的需求去改一改，毕竟要是想送女的的话，那就需要自己了........
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>myHeart</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.heart{
position:absolute;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -135px;
width: 300px;
height:270px;
background: transparent;
/*box-shadow: 2px 2px 5px #000;*/
animation: test 1s linear infinite;
}
.heart:before,
.heart:after{
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 240px;
background: rgb(255,0,0);
border-radius: 150px 150px 0 0;
transform:rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after{
left: 0;
transform:rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes test{
0%{
transform: scale(0.8,0.8);
opacity: 1;
}
25%{
transform: scale(1,1);
opacity: 0.8;
}
100%{
transform: scale(0.8,0.8);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
以上是关于css3画一个跳动的红心的主要内容，如果未能解决你的问题，请参考以下文章
七夕专属博文-使用QGraphics画“红心“或“黑心“（含数学模型讲解）
七夕专属博文-使用QGraphics画“红心“或“黑心“（含数学模型讲解）