<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.heart{
position:absolute;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -135px;
width: 300px;
height:270px;
background: transparent;
filter:drop-shadow(0px 0px 20px rgb(255,20,20));//阴影实现:filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
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>
<script>
</script>
</body>
</html>其他图片简单跳动
.jump_pig_l {
animation: test 1.8s linear infinite;
}
.jump_pig_r {
animation: test 2.2s linear infinite;
}
@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;
}
}