前言：哈喽，大家好，今天给大家分享html+css 实现爱心跳动！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦
目录
️️️️️️⬇️·正文开始⬇️·
一、效果
二、原理解析
1.这是一个，爱心跳动的效果。是一个div元素+2个伪元素组合实现的,如下图。
1.1 div是正方形。
1.2 before是圆形。
1.3after是另一个圆形。
3.具体的变换参数，直接看代码，可以一键复制，查看效果
三、上代码，可以直接复制使用
️目录
️html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html+css 实现hover 实现爱心跳动</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 100px; text-shadow: 0 3px 3px #4c6ed3;">
html+css 实现爱心跳动</h1>
<div class="wrapper">
<div class="aiXin"></div>
</div>
</div>
</body>
</html>
️css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--btn-bg-color: #fff;
--font-color-black: #000;
--btn-bg-color-hover: #FF5833;
}
.container {
min-height: 100vh;
background-color: #0e1538;
}
.wrapper {
margin-top: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}
.aiXin{
position: relative;
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: crimson;
animation: aiXin 1s infinite;
}
/* 使用after和before伪元素来制作圆形的两边 */
.aiXin::after,.aiXin::before{
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: crimson;
animation: aiXin 1s infinite;
}
.aiXin::after{
top: 0px;
left: -50px;
}
.aiXin::before{
top: -50px;
left: 0;
}
@keyframes aiXin{
0%{
width: 100px;
height: 100px;
}
20%{
width: 115px;
height: 115px;
background-color: #ef3953;
}
100%{
width: 100px;
height: 100px;
}
}
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~
更多专栏订阅推荐：
html+css+js 绚丽效果
vue
️ Electron
⭐️ js
字符串
️ 时间对象（Date()）操作
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » html+css 实现爱心跳动
发表评论 取消回复