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

ゞ浴缸里的玫瑰 2022-09-02 13:47 225阅读 0赞

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

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

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

# `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`部分代码 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/6c2359ea02c0440c8fe777a8ea0ad521.png