前端练习之——动画效果（心跳）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.D1{
border: 3px solid cadetblue;
width: 70px;
height: 70px;
border-radius: 50%;
margin: 100px auto;
animation:mysirst 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes mysirst{
from{
width: 70px;
height: 70px;
border: 3px solid cadetblue;
}
to{
width: 100px;
height: 100px;
border: 7px solid cadetblue;
}
}
</style>
</head>
<body>
<div class="D1">
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style>
.D1{
border: 3px solid cadetblue;
width: 70px;
height: 70px;
border-radius: 50%;
margin: 100px auto;
animation:mysirst 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes mysirst{
from{
width: 70px;
height: 70px;
border: 3px solid cadetblue;
}
to{
width: 100px;
height: 100px;
border: 7px solid cadetblue;
}
}
</style>
</head>
<body>
<div class="D1">
</div>
</body>
</html>
