在一些网站中，为了引起用户的注意，部分元素忽大忽小，一下代码可以简易实现其效果，供小白参考。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面元素忽大忽小效果</title>
<style type="text/css">
ul{
border: 1px solid gray;
padding-bottom: 30px;
padding-top: 30px;
margin: 0 auto;
width: 680px;
}
li {
display: inline-block;
list-style: none;
margin-right: 30px;
}
.pic {
-webkit-animation: scaleout 1.3s infinite linear;
animation: scaleout 1.3s infinite linear;
border-radius: 50%;
width: 100px;
height: 100px;
font-size: 20px;
text-align: center;
line-height: 100px;
}
@keyframes scaleout {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity: 0.8;
}
100% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.5;
}
}
</style>
</head>
<body>
<ul>
<li>
<div class="pic" style="background: blue;">1</div>
</li>
<li>
<div class="pic" style="background: red;">2</div>
</li>
<li>
<div class="pic" style="background: yellow;">3</div>
</li>
<li>
<div class="pic" style="background: darkturquoise;">4</div>
</li>
<li>
<div class="pic" style="background:darkgreen;">5</div>
</li>
</ul>
</body>
</html>
效果图对比：
