css3动画与过渡效果结合出现的树叶飘落效果

男娘i 2021-09-18 12:32 504阅读 0赞

* {
    		padding: 0;
    		margin: 0;
    	}
    	ul, ol {
    		list-style: none;
    	}
    	a {
    		text-decoration: none;
    		color: #000;
    	}
    	section {
    		height: 600px;
    		border-bottom: 1px solid #000;
    		position: relative;
    	}
    	.big {
    		/*利用定位调整树叶位置*/
    		position: absolute;
    		width: 240px;
    		height: 152px;
    		background: url(images/page.png);
    		left: 400px;
    		bottom: 150px;
    	}
    	.small {
    		position: absolute;
    		width: 89px;
    		height: 63px;
    		background: url(images/page.png) 0 -152px;
    		left: 250px;
    		top: 50px;
    		/*调用动画*/
    		-webkit-animation: leaf 10s linear 0s infinite;
    	}
    	/*定义动画*/
    	@-webkit-keyframes leaf {
    		0% {
    			/*在天上准备掉落*/
    			opacity: 0;
    			/*移动 旋转  每一个状态样式属性必须一一对应*/
    			/*一个元素可以有多个变形 用空格隔开*/
    			transform: rotate(0deg) translate(0,0);
    		}
    		30% {
    			/*掉落在空中*/
    			opacity: 1;
    			transform: rotate(5deg) translate(200px,180px);
    		}
    		60% {
    			/*掉落在地下*/
    			opacity: 0;
    			transform: rotate(10deg) translate(400px,360px);
    		}
    		100% {
    			/*利用60-100对应的时间模拟等待*/
    			opacity: 0;
    			transform: rotate(10deg) translate(400px,360px);
    		}
    	}
    	
    
    	
    	</style>
    </head>
    <body>
    	<section>
    		<div class="big"></div>
    		<div class="small"></div>
    	</section>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210812/1401de3f05f2419795063b172d31aafc.png