css + js 实现心动特效——前端技能提升

本文链接：https://blog.csdn.net/yehaocheng520/article/details/119354680

马上又七夕情人节了，又到了一年一度的屠狗季节。。。。

送你一个心动特效，抚慰一下幼小的心灵。。。
在这里插入图片描述

下面来实现一下上面的效果：

`html`部分代码

<body>
	<div class="textCon">
		<span class="text">Hearts</span>
	</div>
	<div class="heart"></div>
</body>

`css`部分代码

思路：给class="textCon"的元素添加相对定位，生成的小心心都是里面的子元素，都是绝对定位的，到时候直接给每个子元素赋值不同的left 和 top即可改变元素的位置了

.textCon{
	position:relative;
	width:170px;
	height:60px;
	margin:50px auto;
}
.text{
	font-size:48px;
}
.textCon .item{
	position:absolute;
	opacity:0;
	background-color:#cc2a5d;
	transform:rotate(45deg);
	animation:hearts 3s ease-in infinite;
}
.textCon .item::before,
.textCon .item::after{
	content:'';
	width:100%;
	height:100%;
	background-color:#cc2a5d;
	position:absolute;
	top:0;
	left:0;
	border-radius:50%;
}
.textCon .item::before{
	transform:rotateX(-50%);
}
.textCon .item::after{
	transform:rotateY(-50%);
}
.heart{
	position:relative;
	width:50px;
	height:50px;
	background-color:#cc2a5d;
	margin:50px auto;
	transform:rotate(45deg);
	animation:heart 1s ease-in infinite;
}
.heart::before,.heart::after{
	content:'';
	width:100%;
	height:100%;
	background-color:#cc2a5d;
	position:absolute;
	top:0;
	left:0;
	border-radius:50%;
}
.heart::before{
	transform:translateX(-50%);
}
.heart::after{
	transform:translateY(-50%);
}
@keyframes heart{
	0%{
		transform:scale(0.8) rotate(45deg);
		opacity:0.8;
	}
	50%{
		transform:scale(1) rotate(deg);
		opacity:1;
	}
	100%{
		transform:scale(0.8) rotate(45deg);
		opacity:0;8;
	}
}
@keyframes hearts{
	0%{
		opacity:0;
		transform:translateY(0%) rotate(45deg);
	}
	20%{
		opacity:0.8;
		transform:translateY(-20%) rotate(45deg);
	}
	100%{
		opacity:0;
		transform:translateY(-1000%) rotate(45deg)
	}
}

`js`部分代码

var box = document.getElementsByClassName("textCon")[0];
function init() {
    var width = box.offsetWidth;
    var count = parseInt((width / 50) * 5);
    for (var i = 0; i < count; i++) {
        var size = parseInt(ran(60, 120) / 10);
        var ele = document.createElement("div");
        ele.classList.add("item");
        ele.style.width = size + "px";
        ele.style.height = size + "px";
        ele.style.left = ran(0, 95) + "%";
        ele.style.top = ran(20, 80) + "%";
        ele.style.animationDelay = ran(0, 30) / 10 + "s";
        box.appendChild(ele);
    }
}
function ran(min, max) {
    min = parseInt(min);
    max = parseInt(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
init();