用CSS样式制作跳动的心的效果

最新推荐文章于 2024-05-25 16:50:22 发布

Chris Brown

最新推荐文章于 2024-05-25 16:50:22 发布

阅读量759

点赞数 3

分类专栏：前端 CSS 文章标签： CSS 前端原生代码

本文链接：https://blog.csdn.net/qq_43616237/article/details/95796121

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

使用CSS制作beating heart的动画

首先制作一个位置完全居中的红色正方形。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>A beating heart</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}#div1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -50px;
			}
			</style>
	</head>
<div id="div1">
			</div>

将正方形添加两个半圆改造成一颗爱心

以下为部分代码

#lefthalf {
				width: 50px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -50px;
				float: left;
				border-radius: 50px 0px 0px 50px;
			}

			#righthalf {
				width: 100px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -100px;
				border-radius: 50px 50px 0px 0px;
			}

由于整个图像是倾斜的，我们需要将整个心形正立，因此做旋转处理，并加入跳动的动画，最终的完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>A beating heart</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#div1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -50px;
			
			}

			#lefthalf {
				width: 50px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -50px;
				float: left;
				border-radius: 50px 0px 0px 50px;
			}

			#righthalf {
				width: 100px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -100px;
				border-radius: 50px 50px 0px 0px;
			}

			@keyframes scaleDraw {

				50% {
					transform: rotate(45deg) scale(0.7);

				}

				75% {
					transform: rotate(45deg) scale(1.5);

				}
			}


			#heart {
				width: 100px;
				height: 150px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -40px;
				transform: rotate(45deg);
				-webkit-animation-name: scaleDraw;
				animation-iteration-count: infinite;
				-webkit-animation-duration: 1s;
			}
		</style>
	</head>
	<body>
		<div id="heart">
			<div id="lefthalf">
			</div>
			<div id="div1">
			</div>
			<div id="righthalf">

			</div>
		</div>
	</body>
</html>

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

Chris Brown

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用CSS样式制作跳动的心的效果

使用CSS制作beating heart的动画首先制作一个位置完全居中的红色正方形。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>A beating heart</title> <style type="text/css"...
复制链接

扫一扫