html与css代码实现一个桃子动图

最新推荐文章于 2024-06-06 15:11:13 发布

js老命苦人

最新推荐文章于 2024-06-06 15:11:13 发布

阅读量2.6k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/jsjsjsbuhuia/article/details/127567855

版权

学号后四位：（必填）0227
邀请人ID：（非必填）

这篇文章将用html与css代码来实现一个有趣的桃子动图。

项目名称及描述

名称：晃动的桃子树

以树为背景，设定六个左右摇晃的桃子动画。该项目将用到html与css方面的知识。

HTML部分

摇晃的桃子动图HTML代码部分

<body>
		<div class="outer">
			<div class="bg">
				<p>摇晃的桃子</p>
			    <span class="peach peach1 shake1"></span>
			    <span class="peach peach2 shake2"></span>
			    <span class="peach peach3 shake3"></span>
			    <span class="peach peach4 shake4"></span>
			    <span class="peach peach5 shake5"></span>
			    <span class="peach peach6 shake6"></span>
					
				</span>
			</div>
		</div>
		
	</body>
将代码写在div块中，以便我们对桃子进行设计。这里用了两个div块，一个用以背景，一个用以桃子设计。每个桃子用动画<span>标签，设定三个class属性，用以位置，动画的css设计。

接下来是css代码部分。

CSS代码

这段代码冗长，但是直观，便于理解。

<style type="text/css">
			.outer{
				margin: 0 auto;
				min-width: 1000px;
				overflow: hidden;
			}
			.bg{
				width: 1146px;
				height: 631px;
				background-image: url(img/bg.jpg);
				margin: 0 auto;
				position: relative;
			}
			p{
				font-size: 40px;
				position: absolute;
				left: 180px;
				top: 90px;
			}
			.peach{
				width: 90px;
				height: 100px;
				position: absolute;
				background: url(img/peach.png) no-repeat 0 0;
			}
			.peach1{
				top: 250px;
				left: 340px;
				background-position: 0 0;
			}
			.peach2{
				top: 250px;
				left: 621px;
				background-position: 0 0;
			}
			.peach3{
				top: 380px;
				left: 707px;
				background-position: 0 0;
			}
			.peach4{
				top: 190px;
				left: 520px;
				background-position: 0 0;
			}
			.peach5{
				top: 300px;
				left: 900px;
				background-position: 0 0;
			}
			.peach6{
				top: 190px;
				left: 735px;
				background-position: 0 0;
			}
			@keyframes snake{
				0%{
					transform: rotate(2deg);
					transform-origin: 50% 0;
				}
				20%{
					transform: rotate(10deg);
					transform-origin: 50% 0;
				}
				40%{
					transform: rotate(0  deg);
					transform-origin: 50% 0;
				}
				60%{
					transform: rotate(-4deg);
					transform-origin: 50% 0;
				}
				80%{
					transform: rotate(-10deg);
					transform-origin: 50% 0;
				}
				100%{
					transform: rotate(-2deg);
					transform-origin: 50% 0;
				}
			}
			.shake1{
				animation: snake 1.5s ease-in-out infinite;
			}
			.shake2{
				animation: snake 1.6s ease-in-out infinite;
			}
			.shake3{
				animation: snake 1.7s ease-in-out infinite;
			}
			.shake4{
				animation: snake 1.8s ease-in-out infinite;
			}
			.shake5{
				animation: snake 2s ease-in-out infinite;
			}
			.shake6{
				animation: snake 2s ease-in-out infinite;
			}
			
		</style>

CSS实现思路

父级div只用于设定背景属性。子级中加入桃子图片，对每个class进行设计。我拿class="peach peach1 shake1"这段举例。peach用以导入之后所需的所有桃子序列图。提前设定好大小定位样式，这样一来方便了每个桃子的单独设定。peach1用以设定每个桃子相对于父级的位置。而接下来就是css代码的关键点：自定义动画。

@keyframes snake 自定义动画

@keyframes snake{
				0%{
					transform: rotate(2deg);
					transform-origin: 50% 0;
				}
				20%{
					transform: rotate(10deg);
					transform-origin: 50% 0;
				}
				40%{
					transform: rotate(0  deg);
					transform-origin: 50% 0;
				}
				60%{
					transform: rotate(-4deg);
					transform-origin: 50% 0;
				}
				80%{
					transform: rotate(-10deg);
					transform-origin: 50% 0;
				}
				100%{
					transform: rotate(-2deg);
					transform-origin: 50% 0;
				}
			}
自定义动画以

@keyframes name{
               from{}
               to{}
           }

此为基础框架，我们可以对动画开始到结束进行相当详细的设置。这里采用的是百分式动画节点，以便设置桃子每一个节点的动画。其具体设置可参考上面的代码段。

当我们完成自定义动画设置以后，使用animation: + name 进行调用便可。（name是变量名，自定义名称）。