html+css实现图片缓慢变大效果

布满荆棘的人生 2024-03-23 17:07 81阅读 0赞

## html+css实现图片缓慢变大效果 ##

**简介**：本文讲解如何使用html+css实现让图片缓慢变大的效果。

### 完整代码 ###

下面是是这代码的完整代码和对应的解释。  
在页面中添加了一张图片并给它设置了一些CSS样式。具体为：

*  设置图片的左边距和上边距分别为47%和20%。
 *  设置图片高度为100px，并将其定位方式设置为固定定位，z-index为-1。  
    此外，该代码还定义了两个关键帧动画@keyframes：
 *  floatup动画：使元素从初始状态向上浮动并逐渐消失，持续时间为默认值10秒。
 *  size-up动画：使元素从初始状态开始缩放并逐渐变大，持续时间为6秒。将终止状态的缩放比例修改为35，即将元素放大35倍。  
    最后，将size-up动画添加到img元素中，使图片按照size-up动画的规则进行缩放。

<!DOCTYPE html>
    <html>
    <head>
    	<title>Code Effect</title>
    	<style>
    	img{
          
    	    margin-left: 47%; /* 图片左边距 */
            margin-top: 20%; /* 图片上边距 */
    	    height: 100px; /* 将图片高度设置为初始值 */
          position: fixed; /* 图片定位方式为固定定位 */
          z-index: -1; /* 设置图片z-index */
    	}
    	</style>
    </head>
    <body>
    	<img src="images/1.png"> 
    	
    
    	<style>
    		/* 定义floatup动画，使元素向上浮动并逐渐消失 */
    		@keyframes floatup {
          
    			from {
          
    				transform: translate(-50%, -50%) scale(1); /* 初始状态 */
    				opacity: 1;
    			}
    			to {
          
    				transform: translate(-50%, -150%) scale(2); /* 终止状态，将元素放大2倍，并向上移动50% */
    				opacity: 0;
    			}
    		}
    
    		/* 定义size-up动画，使元素从初始状态缩放到35倍大小 */
    		@keyframes size-up {
          
    			from {
          
    				transform: scale(0.1); /* 初始状态，将元素缩小10倍 */
    			}
    			to {
          
    				transform: scale(35); /* 终止状态，将元素放大35倍 */
    			}
    		}
    
    		/* 将size-up动画添加到img元素中，使图片缩放到35倍大小 */
    		img {
          
    		  	animation: size-up 6s ease-out forwards; /* 动画持续时间为6秒，并在动画结束后保持最终状态 */
    		}
    	</style>
    </body>
    </html>