zoukankan      html  css  js  c++  java
  • css3实现图片的变大变小

    主要是使用 css3的animation,scale等于1是原图大小,大于1是把图片放大,小于1 是把图片缩小。animation-delay用来延迟5秒触发这个动画

    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title>Document</title>
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			body {
    				 100%;
    				height: 100%;
    				overflow: hidden;
    			}
    			
    			.outBox,
    			.innerBox {
    				 100%;
    				height: 100%;
    			}
    			
    			.outBox {
    				overflow: hidden;
    			}
    			
    			.innerBox {
    				 100%;
    				height: 100%;
    				animation: changeBiger 4s linear forwards;
    				animation-delay: 5s;
    				-webkit-animation-delay: 5s;
    				transform: scale(1.08);
    			}
    			
    			@keyframes changeBiger {
    				0% {
    					transform: scale(1.08);
    				}
    				100% {
    					transform: scale(1);
    				}
    			}
    			
    			.innerBox {
    				background-size: cover;
    				background-repeat: no-repeat;
    				background-position: center center;
    				background-image: url(https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D220/sign=627199341fce36d3bd0484320af13a24/ae51f3deb48f8c54ad2aa0c130292df5e1fe7f66.jpg);
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="outBox">
    
    			<div class="innerBox">
    				<!--<img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D220/sign=627199341fce36d3bd0484320af13a24/ae51f3deb48f8c54ad2aa0c130292df5e1fe7f66.jpg" alt="">-->
    			</div>
    		</div>
    
    	</body>
    
    </html>
    

      

  • 相关阅读:
    8.9_java_35
    8.8_java_34
    8.7_java_33
    8.6_java_32
    8.5_java_31
    8.4_java_30
    8.3_java_29
    2020年春季学期《软件工程》教学总结
    json的标准格式
    详解 【Vue】 生命周期
  • 原文地址:https://www.cnblogs.com/lxk0301/p/7930237.html
Copyright © 2011-2022 走看看