520快到了，给你对象写个怦然心动吧

2024-03-08 23:50:04

给你对象写个怦然心动吧

撒花怦然心动
我们先来手动画个心吧，用图片太没心意了^ &^ ```
html结构：

<div class="container">
	<div class="heart">
	</div>
	<div class="flower"></div>
</div>

先写一个正方形，给其绝对定位：

.container .heart {
	position: absolute;
	height: 100px;
	width: 100px;
	border: 1px solid;
}

利用伪元素::after，::before的特性，给正方形的伪元素添加样式

.container .heart::after,.container .heart::before {
	content: '';
	border: 1px solid red;
	display: inline-block;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	position: absolute;
}

此时两个伪元素是重叠的(红色圆圈)：

调整伪元素位置：

.container .heart::after {
	left: -50%;
}
.container .heart::before {
	top: -50%;
}

将.heart顺时针旋转45度，再把其和伪元素的背景设置为红色：

background-color: red;
transform: rotate(45deg);

终于把心画出来了，现在让心跳起来吧！利用animation我们可以这样子做：
先利用@keyframes给出每一帧的动画：

@keyframes heartbeat {
	0% {
		height: 60px;
		width: 60px;
		opacity: 0.5;
	}
	50% {
		height: 100px;
		width: 100px;
		opacity: 1;
	}
	100% {
		height: 60px;
		width: 60px;
		opacity: 0.5;
	}
}

再给.heart添加这个动画：

animation: heartbeat 1.5s linear infinite;

以linear曲线运动方式跳动，跳动一次花的时间为1.5s，跳动infinite(无限)次。

撒花时间到：
画出来的花太丑了，用图片代替吧…
先让花旋转起来：

.container .flower {
	position: absolute;
	background-image: url('../image/flower.png');
	background-size: cover;
	width: 20px;
	height: 20px;
	top: 100px;
	left: 100px;
	animation: rotate 2s;
	
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

接下来让每一朵花随机出现在页面并在规定的时间内淡入淡出，注意，每朵花的淡入淡出时间都不相同。
先引入jQuery：

<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

写一个随机返回一个min~max区间数字的函数，我们会多次用到这个函数：

var random = function(max, min) {
	return Math.floor(Math.random()*(max-min+1)+min);
};

用面向对象的方法…，写一个Flower构造函数，传三个参数，其中x为随机出现位置的left，y为随机出现的top，time为随机的淡入淡出时间：

function Flower(x, y, time) {
	this.x = x;  
	this.y = y;
	this.time = time;
	this.isHas = false;
	this.flowerDom = $('<div class="flower"></div>');
	this.parent = $('.container');
}

在其原型上添加一个创建花的方法：

Flower.prototype.create = function() {
	this.flowerDom.css({left: this.x,top: this.y});
	this.flowerDom.appendTo(this.parent).hide().fadeIn(this.time).fadeOut(this.time);
};

让花随机动起来，利用定时器，让花在随机的时间内出现与消失：

function init() {
	for(var i = 0; i < 20; i ++) {
		setInterval(function(){
			//实例化一朵花，for循环内每朵花的参数都不一样
			flower = new Flower(random(900,0), random(360,0), random(800, 1800)); 
			flower.create();
		}, random(800,1800))	
	}
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>heartbeat</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<style>
	.container {
	width: 1000px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -500px;
	background-image: url(../image/bg.jpg);
	background-size: cover;
}
.container .heart {
	height: 100px;
	width: 100px;
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 50%;
	right: 50%;
	margin-left: -50px;
	margin-top: -50px;
	background-color: red;
	transform: rotate(45deg);
	opacity: 1;
	animation: heartbeat 1.5s linear infinite;
}
.container .heart::after,.container .heart::before {
	content: '';
	background-color: inherit;
	display: inline-block;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	position: absolute;
}
.container .heart::after {
	left: -50%;
}
.container .heart::before {
	top: -50%;
}

.container .flower {
	position: absolute;
	background-image: url('../image/flower.png');
	background-size: cover;
	width: 20px;
	height: 20px;
	top: 100px;
	left: 100px;
	animation: rotate 2s;
	
}
@keyframes heartbeat {
	0% {
		height: 60px;
		width: 60px;
		opacity: 0.5;
	}
	50% {
		height: 100px;
		width: 100px;
		opacity: 1;
	}
	100% {
		height: 60px;
		width: 60px;
		opacity: 0.5;
	}
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
	</style>
</head>
<body>
	<div class="container">
		<div class="heart">
		</div>
		<!-- <div class="flower"></div> -->
	</div>

<script>
	var random = function(max, min) {
		return Math.floor(Math.random()*(max-min+1)+min);
	};
	var flower = null;
	function Flower(x, y, time) {
		this.x = x;
		this.y = y;
		this.time = time;
		this.isHas = false;
		this.flowerDom = $('<div class="flower"></div>');
		this.parent = $('.container');
	}
	Flower.prototype.create = function() {
		this.flowerDom.css({left: this.x,top: this.y});
		this.flowerDom.appendTo(this.parent).hide().fadeIn(this.time).fadeOut(this.time);
	};
	function init() {
		for(var i = 0; i < 20; i ++) {
			setInterval(function(){
				flower = new Flower(random(900,0), random(360,0), random(800, 1800));
				flower.create();
			}, random(800,1800))
			
		}
    }
   init();
</script>
</body>
</html>

码农公寓

相关文章