HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白

Ming-Afresh

已于 2022-04-27 15:19:46 修改

阅读量1.1w

点赞数 15

分类专栏： # Demo 文章标签： css html javascript

于 2021-01-16 12:01:18 首次发布

本文链接：https://blog.csdn.net/Start_Simple/article/details/112697807

版权

Demo 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白

一、拉面版

在这里插入图片描述

css部分

*{
/*		初始化页面元素内外边距*/
		margin:0;
		padding: 0;
	}
	body{
/*		弹性布局元素垂直水平居中*/
		display:flex;
		justify-content: center;
		align-items: center;
/*		占浏览器窗口高度占比*/
		height: 100vh;
		background: #000;
	}
	ul{
/*		相对位置*/
		position:relative;
		display: flex;
		height: 200px;
	}
	ul::after{
		content:'以我所长给予你最美丽温柔';
		wight:400px;
		position: absolute;
		top:0;
		left:50%;
		color: aqua;
		font-size: 30px;
		font-weight: 700;
		transform: translate(-50%,-400%);
	}
	li{
/*		定义下无序表点的大小 这里配合动画可变换不同形状的心*/
		width:20px;
		height: 20px;
		border-radius: 10px;
		margin: 0 10px;
	}
	li:nth-child(1){animation:love1 5s 0s infinite;background: red;}
	li:nth-child(2){animation:love2 5s 0.2s infinite;background: aqua;}
	li:nth-child(3){animation:love3 5s 0.4s infinite;background:darksalmon;}
	li:nth-child(4){animation:love4 5s 0.6s infinite;background:pink;}
	li:nth-child(5){animation:love5 5s 0.8s infinite;background:yellow;}
	li:nth-child(6){animation:love4 5s 1s infinite;background:pink;}
	li:nth-child(7){animation:love3 5s 1.2s infinite;background:darksalmon;}
	li:nth-child(8){animation:love2 5s 1.4s infinite;background:aqua;}
	li:nth-child(9){animation:love1 5s 1.6s infinite;background:red;}
/*	定义动画*/
	@keyframes love1{
		30%,50%{
			height:60px;
			transform: translateY(-30px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love2{
		30%,50%{
			height:120px;
			transform: translateY(-60px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love3{
		30%,50%{
			height:160px;
			transform: translateY(-75px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love4{
		30%,50%{
			height:180px;
			transform: translateY(-60px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love5{
		30%,50%{
			height:200px;
			transform: translateY(-45px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}

在这里插入图片描述

HTML部分

<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>

在这里插入图片描述

二、跳动版

css部分

*{
			padding:0;
			margin: 0;
		}
		body{
			display:flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.love{
			position:relative;
			width: 200px;
			height: 200px;
			transform: rotate(45deg);
			background: crimson;
			animation: love 1s infinite;
		}
		.love::after,.love::before{
			content:'';
			position: absolute;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: crimson;
			animation: love 1s infinite;
		}
		.love::after{
			top:0;
			left: -100px;
		}
		.love::before{
			top:-100px;
			left: 0;
		}
/*		定义心跳动画*/
		@keyframes love{
			0%{
				width:200px;
				height: 200px;
			}
			20%{
				width:230px;
				height: 230px;
				background: #ef3953;
			}
			100%{
				width:200px;
				height: 200px;
			}
		}

HTML部分

<body>
	<div class="love"></div>
</body>

实际效果类似gif动态图

Ming-Afresh

关注

15
点赞
踩
65

收藏

觉得还不错? 一键收藏
2
评论
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白

HTML5+css实现爱心动画效果DW来自程序员的浪漫表白无需JScss部分*{/* 初始化页面元素内外边距*/ margin:0; padding: 0; } body{/* 弹性布局元素垂直水平居中*/ display:flex; justify-content: center; align-items: center;/* 占浏览器窗口高度占比*/ height: 100vh; background: #000; } ul{/* 相对位置*
复制链接

扫一扫