html代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3绘制心跳爱心动画特效 - 站长素材</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--英文字体-->
<link href='https://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<div class="container">
<div class="first-name">
<span> love </span>
</div>
<div class="heart">
<audio>
<source src="mp3/heartbeat.mp3"></source>
</audio>
<span> doudou </span>
<div class="right-heart"></div>
<div class="left-heart"></div>
</div>
<div class="last-name">
<span> you </span>
</div>
</div>
<script src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
css代码
body {
background: #fcc;
height: 100%;
}
body .container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
body .container .first-name span {
padding: 1rem;
font-family: "Cedarville Cursive", cursive;
font-size: 5rem;
letter-spacing: 0.15rem;
color: #bd2222;
}
body .container .last-name span {
padding: 1rem;
font-family: "Cedarville Cursive", cursive;
font-size: 5rem;
letter-spacing: 0.15rem;
color: #bd2222;
}
body .container .heart {
position: relative;
height: 13rem;
width: 13rem;
background: #ff8a80;
border-radius: 50%;
animation: pulse 2s linear infinite;
}
body .container .heart span {
position: absolute;
color: #fcc;
font-family: "Cedarville Cursive", cursive;
font-size: 1.2rem;
letter-spacing: 0.15rem;
z-index: 2;
top: 5.5rem;
left: 4.2rem;
opacity: 0;
}
body .container .heart span:hover {
animation: apear 5s ease;
}
body .container .heart .right-heart {
position: absolute;
right: 3.2rem;
top: 2.8rem;
height: 55%;
width: 30%;
border-radius: 90% 100% 0 90%;
background: #bd2222;
transform: rotate(45deg);
}
body .container .heart .left-heart {
position: absolute;
left: 3.5rem;
top: 2.9rem;
height: 55%;
width: 30%;
border-radius: 100% 90% 90% 0;
background: #bd2222;
transform: rotate(-45deg);
}
@keyframes pulse {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}
@keyframes apear {
0% {
opacity: 0;
}
20% {
opacity: 0.5;
}
40% {
opacity: 1;
}
60% {
opacity: 0.5;
}
80% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
JavaScript代码
const hover = document.querySelector(".heart");
const audio = document.querySelector("audio");
hover.addEventListener("mouseenter",function(){
audio.play();
})
效果图: