实现一个简单的CSS上下浮动动画

敲代码的小螃蟹

于 2020-05-24 17:08:47 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html，css 文章标签： css3 web html

本文链接：https://blog.csdn.net/qq_40420294/article/details/106317561

html，css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现的简单方块上下浮动动画效果。通过定义关键帧动画和transform属性，使方块在垂直方向上进行周期性的位移，从而达到上下浮动的视觉效果。适用于网页设计中增加动态元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记一个简单的CSS上下浮动动画

动画描述

让方块上下浮动

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>方块上下浮动</title> 
<style> 
#myDIV
{
	width:100px;
	height:100px;
	background:red;
	/*Safari 和 Chrome:*/
	
}
#myDIV {
	animation:mymove 1.5s infinite;
	-webkit-animation:mymove 1.5s infinite;
}

@keyframes mymove{
	0% {transform: translate(0px, 0px);}
    50% {transform: translate(0px, -10px);}
	100% {transform: translate(0px, 0px);}
	
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
	0% {transform: translate(0px, 0px);}
    50% {transform: translate(0px, -10px);}
	100% {transform: translate(0px, 0px);}
}
</style>

</head>
<body>
 <div id="myDIV"></div>
</body>
</html>