在一些网站中,为了引起用户的注意,部分元素忽大忽小,一下代码可以简易实现其效果,供小白参考。
<!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>
效果图对比: