Html
    Css
    Js

    
                        
body {
	background-color:#4E4226;
}
#container {
	position:relative;
	height:700px;
	width:500px;
	margin:50px auto;
	overflow:hidden;
	border:4px solid #5C090A;
	background:#4E4226 url('https://webkit.org/blog-files/leaves/images/backgroundLeaves.jpg') no-repeat top left;
}
#leafContainer {
	position:absolute;
	width:100%;
	height:100%;
}
#message {
	position:absolute;
	top:160px;
	width:100%;
	height:300px;
	background:transparent url('https://webkit.org/blog-files/leaves/images/textBackground.png') repeat-x center;
	color:#5C090A;
	font-size:220%;
	font-family:'Georgia';
	text-align:center;
	padding:20px 10px;
	box-sizing:border-box;
	background-size:100% 100%;
	z-index:1;
}
p {
	margin:80px 15px;
}
a {
	color:#5C090A;
	text-decoration:none;
}
em {
	font-weight:bold;
	font-style:normal;
}
.phone {
	font-size:150%;
	vertical-align:middle;
}
#leafContainer>div {
	position:absolute;
	width:100px;
	height:100px;
	animation-iteration-count:infinite,infinite;
	animation-direction:normal,normal;
	animation-timing-function:linear,ease-in;
}
#leafContainer>div>img {
	position:absolute;
	width:100px;
	height:100px;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-timing-function:ease-in-out;
	transform-origin:50% -100%;
}
@keyframes fade {
	0% {
	opacity:1;
}
90% {
	opacity:0.7;
}
100% {
	opacity:0;
}
}@keyframes drop {
	0% {
	transform:translate(0px,-50px);
}
100% {
	transform:translate(0px,650px);
}
}@keyframes clockwiseSpin {
	0% {
	transform:rotate(-50deg);
}
100% {
	transform:rotate(50deg);
}
}@keyframes counterclockwiseSpinAndFlip {
	0% {
	transform:scale(-1,1) rotate(50deg);
}
100% {
	transform:scale(-1,1) rotate(-50deg);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

飘落的树叶

0