一个会跳动的心
动画效果
一个会跳动的心
1、原码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:200px;
margin:200px auto;
height:200px;
background:red;
border-radius:0;
transform:rotate(45deg);
position:relative;
/*
animation-name：要执行的动画名称
animation-duration：动画执行一个周期所需要的时间
animation-timing-function：linear（匀速）、ease、ease-in、ease-out、
ease-in-out
animation-deley：延迟时间
animation-iteration-count：动画执行的次数 数字/infinite（无限循环）
*/
animation:xin 2s linear 2s infinite;
}
div::before,div::after{
content:'';
display:block;
width:100%;
height:100%;
background:red;
border-radius:50%;
position:absolute;
top:0;
}
div::before{
left:-100px;
}
div::after{
top:-100px;
}
/* 定义动画名称 */
@keyframes xin{
0%{transform:rotate(45deg) scale(1);}
25%{transform:rotate(45deg) scale(1.2);}
50%{transform:rotate(45deg) scale(1);}
75%{transform:rotate(45deg) scale(0.8);}
100%{transform:rotate(45deg) scale(1);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、效果图
