css实现盒子重复放大缩小

最新推荐文章于 2023-08-06 17:03:05 发布

在线小白www

最新推荐文章于 2023-08-06 17:03:05 发布

阅读量1.2k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43654065/article/details/112182964

版权

CSS 专栏收录该内容

97 篇文章 2 订阅

订阅专栏

效果
在这里插入图片描述
html

<div class=box1></div>

css

.box1{
	width:100px;
	height:100px;
	margin:auto;
	animation:myMove .5s infinite alternate linear;
	-moz-animation:myMove .5s infinite alternate linear;
	-webkit-animation:myMove .5s infinite alternate linear;
	-o-animation:myMove .5s infinite alternate linear;
}
@keyframes myMove{
	0%{transform:scale(.7)
	100%{transform:scale(1)
}
@-moz-keyframes myMove{
	0%{transform:scale(.7)
	100%{transform:scale(1)
}
@-webkit-keyframes myMove{
	0%{transform:scale(.7)
	100%{transform:scale(1)
}
@-o-keyframes myMove{
	0%{transform:scale(.7)
	100%{transform:scale(1)
}