css落叶效果_季节性CSS：具有逼真的阴影CSS 3D中的落叶

css落叶效果

Autumn steals upon us quickly in Canada: the first snows already dust the ground, making it an appropriate time to create a CSS3 animation of falling leaves.

在加拿大，秋天很快就袭来了我们：第一场大雪已经粉尘覆盖，这是时候制作落叶的CSS3动画了。

The alpha-masked PNG leaf images (converted to 16-bit PNGs to save on file size) are animated with the CSS keyframe sequences below; I’ve also used CSS 3D transforms to twist the leaves as they descend. (You'll need to refresh the page to replay the animation).

带有 alpha蒙版的PNG叶子图像 ( 转换为16位PNG以节省文件大小) 使用以下CSS关键帧序列进行动画处理 ； 我还使用CSS 3D变换在树叶下降时扭曲树叶。 (您需要刷新页面以重播动画)。

I was interested to see if the drop-shadow filter I have recently discussed would be animated while keeping the 3D perspective of each leaf: I’m very pleased to report that it does. (As a recent code addition to Webkit, only Chrome 20+ and Safari 6 users will see the shadow forming under the leaves as they drift towards the ground).

我很想看看我最近讨论过 的阴影滤镜在保留每片叶子的3D透视图的同时是否可以动画化：我很高兴报告它确实如此。 (作为Webkit的最新代码，只有Chrome 20+和Safari 6用户在向地面漂移时会看到树叶下面的阴影)。

The CSS consists of two keyframe sequences; it’s the variation in calling these sequences and the initial state of the individual leaves, set with inline styles, that creates variety in the animation. Code is shown sans vendor prefixes to save space.

CSS由两个关键帧序列组成； 正是这些调用顺序的变化以及以内联样式设置的单个叶子的初始状态在动画中创造了多样性。 显示代码时没有供应商前缀，以节省空间。

@keyframes sway { 
	0% { 
		transform: rotateZ(-15deg) rotateX(55deg);
	}
    30% {
		transform: rotateZ(20deg) rotateX(60deg);
		animation-timing-function: ease-in-out;
	}
	60% { 
		transform: rotateZ(-20deg) rotateX(55deg);
		animation-timing-function: ease-in-out;
	}
    100% {
		transform: rotateZ(0deg) rotateX(58deg);
		animation-timing-function: cubic-bezier(0.990, 0.000, 0.890, 0.435);
		}
}
@keyframes fall { 
	60% {
		filter: drop-shadow(0px 60px 40px rgba(0,0,0,0));
	}
	100% {
		margin-top: 500px;
		filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6));
	}
}
div#autumn-container {
	width: 768px;
	height: 400px;
	border: 1px solid #000;
	overflow: hidden;
	position: relative;
	perspective: 1800px;
	}
img[alt="autumn leaf"] {
	position: absolute;
	width: 33%;
	transform-origin: 0px -400px 0px;
	animation-name: fall, sway;
	animation-duration: 7s, 8s;
	animation-fill-mode: both;
	animation-timing-function: linear, ease-in-out;
}

The HTML and inline styles:

HTML和内联样式：

<div id="autumn-container">
	<img src="leaf.png" alt="autumn leaf" style="top: -60px;">
	<img src="leaf2.png" alt="autumn leaf" style="top: -45px; left: 300px; animation-delay: 2s;">
	<img src="leaf4.png" alt="autumn leaf" style="width: 28%; top: -122px; left: 110px; animation-delay: 3.2s;">
	<img src="leaf5.png" alt="autumn leaf" style="width: 35%; top: -55px; left: 198px; animation-delay: 4.4s;">
	<img src="leaf7.png" alt="autumn leaf" style="width: 38%; top: -18px; left: 560px; animation-delay: 2.25s;">
	<img src="leaf6.png" alt="autumn leaf" style="width: 33%; top: 0px; left: 401px; animation-delay: 3.8s;">
</div>

There are many possible improvements to the animation, the obvious two being the use of JavaScript to randomly generate new instances of leaves and fall behaviour while handing the actual animation over to CSS3 declarations. I should mention that all of these subjects are featured in my book, Pro CSS3 Animation.

动画有很多可能的改进，明显的两个是使用JavaScript随机生成新的叶子和跌落行为实例，同时将实际的动画交给CSS3声明。 我应该提到，所有这些主题在我的书Pro CSS3 Animation中都有介绍。

翻译自: https://thenewcode.com/604/Seasonal-CSS-Falling-Leaves-In-CSS-3D-With-Realistic-Shadows

css落叶效果