介绍

原文链接

感謝 comehope 大佬的 [前端每日实战]

工作三个月觉得糟糕跑路(顺带劝一下像我一样的新人, 不要急于入职, 一定要挑一挑)回家重新补充了一下基础知识及 node, 身为一个前端结果发现 CSS 已经手生了, 为了明年能够找到工作, 所以又开始练习了...

效果预览

源代码地址

代码解读

1. 首先是完成 html 结构

我们需要五颗爱心及底部的 footer

pink hearts

样式初始化及居中

body {

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-color: #f3f3f3;

overflow: hidden;

}

.hearts {

width: 100vw;

height: 20vw;

border: 1px solid; /* the snippet will be deleted */

box-sizing: border-box;

padding: 0 5vw;

display: flex;

align-items: center;

justify-content: space-between;

}

.heart {

width: 15vw;

height: 15vw;

border: 1px solid; /* the snippet will be deleted */

}

footer {

margin-top: 10vh;

text-transform: uppercase;

letter-spacing: 2px;

font-family: "verdana";

font-size: 22px;

color: #F48FB1;

}

2. 画出旋转的 粉红正方形

接着在第一个 heart 中添加一个粉红的正方形

添加 DOM 结构

基准面(plane) 定位并完成基础样式

.heart {

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

.plane {

position: absolute;

opacity:0.8;

}

.half-heart {

width: 7.5vw;

height: 7.5vw;

background-color: pink;

transform: rotate(-45deg);

}

一颗爱心由两个基准面组成

.heart {

transform-style: preserve-3d;

}

.plane-right {

transform: rotateY(90deg); /* 因为此处为 90 度垂直, 所以并不可见 */

}

接着添加旋转动画(这样我们就可以看到两个基准面了)

.heart {

animation: rotate 5s ease-in-out infinite;

}

.heart:nth-of-type(1) {

animation-delay:-5s;

}

/* keyframes */

@keyframes rotate {

0% {

transform: rotateY(0deg) rotateZ(25deg) translateY(7.5vw);

}

50% {

transform: rotateY(270deg) rotateZ(25deg) translateY(-7.5vw);

}

100% {

transform: rotateY(360deg) rotateZ(25deg) translateY(7.5vw);

}

}

3. 将旋转的两个正方形改为心形

生成两个圆形放置在正方的上方即可(伪元素可解决)

.half-heart:before,

.half-heart:after {

content: "";

width: 7.5vw;

height: 7.5vw;

background-color: pink;

border-radius: 100%;

position: absolute;

}

.half-heart:before {

top: -3.25vw;

left: 0;

}

.half-heart:after {

top: 0;

left: 3.25vw;

}

好了, 这样一个旋转上升的爱心就完成了

4. 补完 5 个 heart

修改延迟时间(DOM 结构省略)

.heart:nth-of-type(1) {

animation-delay:-5s;

}

.heart:nth-of-type(2) {

animation-delay:-4s;

}

.heart:nth-of-type(3) {

animation-delay:-3s;

}

.heart:nth-of-type(4) {

animation-delay:-2s;

}

.heart:nth-of-type(5) {

animation-delay:-1s;

}

5. 最后

最后记得把之前确认位置及大小的 border 边框删除即可