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

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

一、拉面版

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

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);
		}
	}

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

HTML部分

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

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

二、跳动版

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;
			}
		}

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

HTML部分

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

实际效果类似gif动态图

你可能感兴趣的:(#,Demo,css,html,javascript)