使用CSS和HTML绘制一个跳动的爱心
使用HTML和纯CSS来绘制一个跳动的爱心
- 首先我们先写好html元素和并给一个初始宽高并让其居中。
<body> <main> <div class="heart"></div> </main> </body>
body{
margin: 0;
}
.heart{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: red;
}
一个小技巧 ：给元素设置绝对定位，并将四个方向的定位都设为0 ，然后将margin设置为auto，即可实现元素在父元素的正中心。 效果如下：
- 下面进入到关键部分，给这个元素设置伪元素。
.heart:before{
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 30px;
height: 50px;
content: ;
border-radius: 30px 30px 0 0;
background: white;
left: 30%;
}
效果如下： 给它加一个旋转：
.heart:before{
transform: rotate(-45deg);
transform-origin: 0 100%;
}
在CSS中，坐标系原点在左上角，x轴正方向向右，y轴正方向向下。transform-origin属性是定义transform操作的原点，第一个值是在x轴的位置，第二个值是在y轴的位置。0 和100%的意思就是新定义的原点在x轴的原点，y轴的末端（即宽度的末端），也就是左下角。 以左下角为原点，并旋转-45°后的效果如下： 这样就得到了爱心的一边，那么我再定义一个伪元素
.heart:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 30px;
height: 50px;
content: ;
border-radius: 30px 30px 0 0;
background: white;
left: -30%;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
除了定位不一样，旋转中心与旋转角度不一样以外，其他的都一样。 这时候的效果如下图： 这样一个爱心就完成了。那么要怎样才能让它跳动起来呢？ 通过@keyframes定义跳动的动画，再给他设置animation属性就可以啦，代码如下：
@keyframes heart-beat {
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.heart{
animation: heart-beat 1s ease infinite;
}
有点奇怪，把背景与伪元素的颜色对换一下。
.heart{
background: white;
}
.heart:before,.heart:after{
background: red;
}
改过之后又发现整个页面会随着动画的改变而抖动，主要是因为直接main标签直接包裹的这个div会被这个div撑开，而这个div又要时时刻刻保持在屏幕的中央，放大的时候撑开导致屏幕大小的变化因此出现抖动。 修改方式： 1.先将heart类的样式中宽高去掉 2.给main元素添加wrap类
<main class="wrap">
3.给wrap类添加样式，主要是确定宽高，然后居中
.wrap{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
这样就正常啦。
