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

Ming-Afresh

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

阅读量1.2w

点赞数 15

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

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

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

版权

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){