<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.boss {
width: 800px;
height: 800px;
}
.dv {
animation: animation1 1.5S infinite;
}
.div {
top: 30%;
width: 300px;
height: 300px;
position: absolute;
left: 20%;
}
.d1 ,.d2,.d3 {
position: absolute;
width: 64%;
height: 64%;
background: #E88D8D;
}
.d1 ,.d2 {
border-radius: 50%;
}
.d1 {
left: 0;
}
.d2 {
right: 0;
}
.d3 {
width: 56%;
height: 56%;
bottom: 16%;
left: 50%;
transform: translateX(-50%)rotate(45deg);
z-index: 1;
}
.d3 h4 {
width: 100%;
height: 100%;
z-index: 999;
font-size: 12px;
color: #E88D8D;
}
.pink {
color: #E88D8D;
animation: pink 2S forwards ;
}
@keyframes pink {
0% {color: #E88D8D}
100% {color: #fff;}
}
@keyframes animation1 {
0% {
width: 300px;
height: 300px;
top: 30%;
opacity: 1;
left: 20%;
}
100%{
width: 500px;
height: 500px;
top: 20%;
opacity: 0;
left: 15%;
}
}
.animation2 {
animation: animation2 2S forwards ;
z-index: 999;
/* transform: scale(1.3); */
}
.animation3 {
animation: animation3 2S forwards ;
z-index: 999;
}
@keyframes animation2 {
0% {transform: scale(1);}
100% {transform: scale(6);}
}
@keyframes animation3 {
0% {transform: scale(6);}
100% {transform: scale(1);}
}
</style>
</head>
<body>
<div class="boss">
<div class="div dv">
<div class="d1"></div>
<div class="d3"></div>
<div class="d2"></div>
</div>
<div class="div" id="dv">
<div class="d1"></div>
<div class="d3"><h4 id="h4">I LOVE YOU ! :)<br > My mather and father :)</h4></div>
<div class="d2"></div>
</div>
</div>
<script>
window.onload = function(argument) {
var dv = document.querySelector('#dv');
var h4 = document.querySelector('#h4');
var qq = true;
dv.addEventListener('click',function () {
if(qq){
qq = false;
dv.className = 'div animation2'
h4.className = 'pink'
console.log(qq);
}else {
qq = true;
dv.className = 'div animation3'
console.log(qq);
}
})
}
</script>
</body>
</html>
