Results preview
Press the "click Preview" button to the right of the current page preview, click on the link full-screen preview.
https://codepen.io/zhang-ou/pen/qYqwQp
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
Please download from github.
https://github.com/comehope/front-end-daily-challenges/tree/master/006-blue-dazzling-diamond
Code Reading
Defined dom, comprising a container element:
<div class="diamond">
<span></span>
</div>
Centered:
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Draw the shape of the first set of facets:
.diamond {
display: grid;
}
.diamond span {
border-width: 50px;
border-style: solid;
}
A first group of facet color, but also to use these color values as the back, so the definition of the variables:
:root {
--color1: deepskyblue;
--color2: steelblue;
--color3: royalblue;
--color4: dodgerblue;
}
.diamond span {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
dom container add 3 Group facets:
<div class="diamond">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
4 the first group of facets composition swastika grid, converted to a diamond shape:
.diamond {
grid-template-columns: 1fr 1fr;
transform: rotate(45deg);
}
.diamond span:first-child {
border-color: transparent var(--color2) var(--color3) transparent;
}
Custom animation effects:
@keyframes animate {
0% {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
25% {
border-color: var(--color4) var(--color1) var(--color2) var(--color3);
}
50% {
border-color: var(--color3) var(--color4) var(--color1) var(--color2);
}
75% {
border-color: var(--color2) var(--color3) var(--color4) var(--color1);
}
100% {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
}
Finally, the animation effect applied to the facet except Group 1:
.diamond span:not(:first-child) {
animation: animate 2s linear infinite;
}
We're done!
Knowledge Point
- variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- border-width https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
- border-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
- grid-template-column https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
- rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate