页面元素尺寸忽大忽小

比眉伴天荒 2021-09-15 10:10 225阅读 0赞

在一些网站中，为了引起用户的注意，部分元素忽大忽小，一下代码可以简易实现其效果，供小白参考。

<!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>

效果图对比：

![20180511215915774][]![20180511215922679][]

[20180511215915774]: https://img-blog.csdn.net/20180511215915774
[20180511215922679]: /images/20210802/4938204772e4471d885e6e1824287cbe.png