使用HTML+CSS写出心跳

最新推荐文章于 2022-09-08 20:26:01 发布

x 心动

最新推荐文章于 2022-09-08 20:26:01 发布

阅读量278

点赞数

分类专栏： html5+css3 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45623072/article/details/121740345

版权

html5+css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

非常简单，用的是Hbuilder X编辑器写的，仅供参考。后续会完善成一个表白网页。

又是套娃的一天鸭❤！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				position: relative;
				background-color: pink;
			}
			span{
				position: absolute;
				left: 36%;
				display: block;
				color: red;
				margin: 30px auto;
				font-size: 400px;
				transition: all .3s;
				animation-name: xin;
				animation-duration: 3s;
				/* 重复动画效果
				放映完之后倒回 */
				animation-iteration-count: infinite; 
				animation-direction: alternate;			
			}
			@keyframes xin{
					0%{
						transform: scale(1.0);
					}
			
					100%{
						transform: scale(1.5);
					}
			}
		</style>
	</head>
	<body>
		<span>
			❤
		</span>
	</body>
</html>

这是样式，因为没有录制视频或者gif，将就看一下，代码复制过去运行效果会更好。

x 心动

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用HTML+CSS写出心跳

非常简单，用的是Hbuilder X编辑器写的，仅供参考。后续会完善成一个表白网页。又是套娃的一天鸭❤！<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ p.
复制链接

扫一扫