CSS动画

效果图:

实现效果描述:

子元素相对父元素水平垂直居中并重复循环放大缩小

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.block {
				height: 300px;
				width: 300px;
				border: 1px solid #FF0000;
				align-items: center;
				display: flex;
				justify-content: center;
			}

			.item {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				border: 1px solid #FF0000;
				color: red;
				animation: mymove 5s infinite;
			}

			@keyframes mymove {
				0% {
					width: 100px;
					height: 100px;
				}

				50% {
					width: 210px;
					height: 210px;
				}
				100% {
					width: 100px;
					height: 100px;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				from {
					top: 0px;
				}

				to {
					top: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div class="block">
			<div class="item">
			</div>
		</div>
	</body>
</html>

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值