介紹
原文鏈接感謝 comehope 大佬的 [前端每日實戰]
工作三個月覺得糟糕跑路(順帶勸一下像我一樣的新人, 不要急於入職, 一定要挑一挑)回家重新補充了一下基礎知識及 node, 身爲一個前端結果發現 CSS 已經手生了, 爲了明年能夠找到工作, 所以又開始練習了...
效果預覽
github.io 瀏覽
源代碼地址
https://github.com/shanyuhai1...
代碼解讀
1. 首先是完成 html
結構
我們需要五顆愛心及底部的 footer
<figure class="hearts">
<section class="heart"></section>
<section class="heart"></section>
<section class="heart"></section>
<section class="heart"></section>
<section class="heart"></section>
</figure>
<footer>pink hearts</footer>
樣式初始化及居中
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 結構
<section class="heart">
<div class="plane">
<div class="half-heart"></div>
</div>
</section>
基準面(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);
}
一顆愛心由兩個基準面組成
<section class="heart">
<div class="plane plane-left">
<div class="half-heart"></div>
</div>
<div class="plane plane-right">
<div class="half-heart"></div>
</div>
</section>
.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 邊框刪除即可