Results preview
Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.
https://codepen.io/comehope/pen/wjZoGV
Interactive video tutorials
This video is interactive, you can pause the code video, editing video.
Please use chrome, safari, edge open view.
Source code download
Daily front-end combat series full source code can be downloaded from github:
https://github.com/comehope/front-end-daily-challenges
Code Reading
Defined dom, the container comprising a bulletin board, a bulletin board hanging pin 3 and the fixed rope string:
<div class="signboard">
<div class="sign">THANKS</div>
<div class="strings"></div>
<div class="pin top"></div>
<div class="pin left"></div>
<div class="pin right"></div>
</div>
Centered:
html, body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center 60%, white, sandybrown);
}
Define the overall size of the billboard:
.signboard {
width: 400px;
height: 300px;
}
Set wood style:
.signboard {
position: relative;
}
.sign {
width: 100%;
height: 200px;
background: burlywood;
border-radius: 15px;
position: absolute;
bottom: 0;
}
Provided with an engraving effect text style:
.sign {
color: saddlebrown;
font-family: sans-serif;
font-weight: bold;
text-align: center;
line-height: 200px;
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3),
0 -2px 0 rgba(0, 0, 0, 0.7);
}
Draw string:
.strings {
width: 150px;
height: 150px;
border: 5px solid brown;
position: absolute;
border-right: none;
border-bottom: none;
transform: rotate(45deg);
top: 38px;
left: 122px;
}
Draw string of top pushpin:
.pin {
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
}
.pin.top {
background: gray;
left: 187px;
}
Shown left and right sides of the pin on the board:
.pin.left,
.pin.right {
background: brown;
top: 110px;
box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}
.pin.left {
left: 80px;
}
.pin.right {
right: 80px;
}
Finally, let's shake up signs:
(here by a small Lei-lei has proposed changes to the top of the rotation axis as a pushpin, the effect is better than the original)
.signboard {
animation: swing 1.5s ease-in-out infinite alternate;
transform-origin: 200px 13px;
}
@keyframes swing {
from {
transform: rotate(10deg);
}
to {
transform: rotate(-10deg);
}
}
We're done!