前端实例2-h5+css-跳动的心

最新推荐文章于 2023-05-11 22:57:55 发布

乐乐今天没bug

最新推荐文章于 2023-05-11 22:57:55 发布

阅读量613

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41826265/article/details/103586809

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

- 需求
- 代码实现

需求

用h5+css实现跳动的心的动画

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跳动的心</title>
	<style>
		#box{
			margin:0 auto;
			width: 200px;
			height: 200px;
			animation: heart 500ms infinite alternate;
		}
		#left{
			width: 50px;
			height: 50px;
			background: red;
			transform: rotate(45deg) translate(171px,151px);
			border-radius: 50% 0 0 50%;
		}
		#middle{
			width: 50px;
			height: 50px;
			background: red;
			transform: rotate(45deg) translate(165px,115px);
		}
		#right{
			width: 50px;
			height: 50px;
			background: red;
			transform: rotate(45deg) translate(130px,49px);
			border-radius: 50% 50% 0 0;
		}
		@keyframes heart{
			0%{transform: scale(1);}
			100%{transform: scale(1.4);}
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="left"></div>
		<div id="middle"></div>
		<div id="right"></div>
	</div>
</body>
</html>

乐乐今天没bug

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
前端实例2-h5+css-跳动的心

文章目录需求代码实现需求用h5+css实现跳动的心的动画代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跳动的心</title> <style> #box{ margin:0 auto; ...
复制链接

扫一扫

专栏目录