学习链接:B站视频
一、绘制心形
讲解
所谓心形,就是一个正方形,加两个直径等于正方形的圆组成的
然后再旋转45°,把边框去掉就获得一个爱心了
代码
<div class="heart"></div>
.heart { /* 为一个正方形 */
position: relative;
width: 200px;
height: 200px;
background-color: #e74c3c;
transform: rotate(45deg); /* 旋转45° */
}
.heart::before, /* 使用伪元素来构造圆 */
.heart::after {
position: absolute;
content: '';
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e74c3c;
}
.heart::before {
transform: translateX(-100px);
}
.heart::after {
transform: translateY(-100px);
}
二、跳动起来
演示
(莫名的害怕)
代码
<div class="heart"></div>
.heart { /* 为一个正方形 */
position: relative;
width: 200px;
height: 200px;
background-color: #e74c3c;
transform: rotate(45deg) scale(.5); /* 旋转45° */
opacity: .5;
animation-name: hd;
animation-duration: 2s;
animation-iteration-count: infinite; /* 无限循环 */
}
.heart::before, /* 使用伪元素来构造圆 */
.heart::after {
position: absolute;
content: '';
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e74c3c;
}
.heart::before {
transform: translateX(-100px);
}
.heart::after {
transform: translateY(-100px);
}
@keyframes hd { /* 定义动画的变化帧:缩放、透明度 */
25% {
opacity: 1;
transform: rotate(45deg) scale(1);
}
50% {
opacity: .5;
transform: rotate(45deg) scale(.5);
}
75% {
opacity: 1;
transform: rotate(45deg) scale(1);
}
to {
opacity: .5;
transform: rotate(45deg) scale(.5);
}
}