How to achieve the effect of a color card with pure CSS

This article mainly introduces about how to use pure CSS to achieve a color card effect, has a certain reference value, now share to everyone, have the need for friends can refer to

Source code Download

The full source code of the daily Front end Combat series is available from GitHub:

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

To define the DOM, the container contains 8 elements:

<p class= "Cards" >    <span></span>    <span></span>    <span></span >    <span></span>    <span></span>    <span></span>    <span ></span>    <span></span></p>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:lightgray;}

Redefine box model:

. cards,.cards > * {    box-sizing:border-box;}

Define Container Dimensions:

. cards {    width:20em;    Height:20em;}

Draw a good card:

. Cards span {    position:absolute;    Width:10em;    Height:3em;    Background-color:lightgreen;    Top:calc (50%-3EM/2);    Border:0.2em solid Dimgray;    Border-radius:0.3em 0.8em 0.8em 0.3em;}

To draw the label of an excellent card with pseudo-elements:

. Cards Span::before {    content: ';    Position:absolute;    width:35%;    height:100%;    Background-color:white;    right:0;    border-radius:0 0.6em 0.6em 0;    Border-left:0.2em solid silver;}

Use pseudo-elements to draw the text on the card label:

. Cards Span::after {    content: ';    Position:absolute;    Width:0.4em;    Height:2em;    Background-color:silver;    left:6.5em;    Top:0.1em;    Box-shadow:0.7em 0 0-0.1em Silver;}

To set a variable for a color card:

. Cards Span:nth-child (1) {    --n:1;}. Cards Span:nth-child (2) {    --n:2;}. Cards Span:nth-child (3) {    --n:3;}. Cards Span:nth-child (4) {    --n:4;}. Cards Span:nth-child (5) {    --n:5;}. Cards Span:nth-child (6) {    --n:6;}. Cards Span:nth-child (7) {    --n:7;}. Cards Span:nth-child (8) {    --n:8;}

Color cards are colored with HSL color mode:

. Cards span {    BACKGROUND-COLOR:HSL (Calc (360/8 * VAR (--n)), 80%, 70%);}

To define an animation effect:

. Cards span {    transform-origin:right;    Animation:rotating 3s linear infinite;} @keyframes Rotating {    0, 35% {        transform:rotate (0deg);    }    90%, 100% {        transform:rotate (360deg);    }}

Finally, set the animation delay so that the card rotates in turn:

. Cards span {    Animation-delay:calc ((Var (--n)-8) * 0.15s);}

Done!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!