Foreword
This article will introduce a sliding display effect, implemented through HTML and CSS. This effect can display a set of numbers in a web page and create an interactive effect when the mouse is hovered or focused. We will use an unordered list (ul) to hold the numbers and create a list item (li) for each number. Each list item contains a number (span), and the sliding display of the number is achieved by setting different styles and transition effects.
To achieve the desired effect, we use some CSS properties and pseudo-classes. Make sure the element’s width and height include padding and borders by setting the element’s box-sizing property to border-box. The entire page adopts a grid layout (display: grid), and the content is displayed in the center through the place-items attribute.
On the page background, we added a layer of transparent grid lines effect. This is achieved with two linear gradient backgrounds and a mask. The direction and angle of the mask and the color of the lines can be adjusted by modifying variables.
The style of each number is defined in the .digit class. The spacing between numbers is controlled by the padding property and can be adjusted as needed. When a number gets focus or the mouse is hovering, the dynamic effect of the number is achieved by setting the styles of the pseudo-classes :hover and :focus-visible.
Code analysis
<section>
<p>sliding display</p>
<ul class="code">
<li tabindex="0" class="digit">
<span>0</span>
</li>
<li tabindex="0" class="digit">
<span>3</span>
</li>
<li tabindex="0" class="digit">
<span>4</span>
</li>
<li tabindex="0" class="digit">
<span>8</span>
</li>
<li tabindex="0" class="digit">
<span>7</span>
</li>
<li tabindex="0" class="digit">
<span>2</span>
</li>
</ul>
</section>
This part is HTML code that defines a number combination that includes a sliding display effect. Use the
The
tag is used to display the text “Sliding Display”. Next is an unordered list (
) to hold the numbers. Each number is wrapped in a list item (
), which is made available through the tabindex="0" attribute List items can get focus. The numbers themselves are wrapped in * {<!-- -->
box-sizing: border-box;
}
body {<!-- -->
min-height: 100vh;
display: grid;
place-items: center;
font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
background: hsl(0 0% 0%);
gap: 2rem;
}
This part is CSS code, used to set global styles. The * selector specifies that all elements should use the border-box model for box size calculations. The body selector defines the style of the main part of the page, where min-height: 100vh; sets the page height to the viewport height. display: grid; and place-items: center; will display the page content in the center. The font-family attribute specifies the priority and alternatives of the font, the background attribute sets the page background color to black, and the gap attribute defines the distance between elements. spacing between.
body::before {<!-- -->
--line: hsl(0 0% 95% / 0.25);
content: "";
height: 100vh;
width: 100vw;
position: fixed;
background:
linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
mask: linear-gradient(-15deg, transparent 30%, white);
top: 0;
z-index: -1;
}
This part is the CSS code used to create the grid lines effect in the background of the page. The body::before pseudo-element is used to add content that is displayed before the main body of the page. --line is a custom CSS variable used to specify the color and transparency of lines. content: ""; means that the pseudo element has no actual content and is just for generating background effects. The height and width properties set the pseudo-element’s height and width to 100vh and 100vw, making it the same size as the viewport. position: fixed;Fixes the pseudo-element to the position of the viewport. The background attribute uses two linear gradient backgrounds to achieve a grid line effect. For specific details, please refer to the comments in the code. The mask attribute creates a mask effect that sets the transparency gradient through a linear gradient, producing an effect where the grid lines disappear. top: 0; positions the pseudo-element to the top of the page, and z-index: -1; places it at the bottom.
section {<!-- -->
display: grid;
gap: 4rem;
align-items: center;
justify-content: center;
}
section p {<!-- -->
margin: 0;
font-size: 2.25rem;
color: hsl(0 0% 40%);
text-align: center;
color: #d5d0d0;
background-clip: text;
}
This part is the CSS code used to style the
display: grid;Display elements in a grid layout. gap: 4rem;Set the gap between grid items to 4rem. align-items: center; and justify-content: center; center align element content both horizontally and vertically. The section p selector defines a
that wraps a combination of numbersThe style of the
element, including font size, color, and text alignment.
.code {<!-- -->
font-size: 3rem;
display: flex;
flex-wrap: nowrap;
color: hsl(0 0% 100%);
border-radius: 1rem;
background: hsl(0 0% 6%);
justify-content: center;
box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
}
.code:hover {<!-- -->
cursor: grab;
}
This part is the CSS code used to style the number combination. The .code class defines the style of number combinations. font-size: 3rem;Set the font size of numbers to 3rem. display: flex;Display the number combination in the form of a flexible box. flex-wrap: nowrap; Set the flex box not to wrap and keep it displayed on the same line. color: hsl(0 0% 100%);Set the color of the number to white. border-radius: 1rem;Set the border radius of the number combination to 1rem. background: hsl(0 0% 6%);Set the background color of the number combination to black. justify-content: center; Center the number horizontally. box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;Add an inner shadow effect to make the digital combination look three-dimensional. .code:hover pseudo-class sets the cursor to change to a grab style when the mouse hovers over a number combination.
.digit {<!-- -->
display: flex;
height: 100%;
padding: 5.5rem 1rem;
}
.digit:focus-visible {<!-- -->
outline-color: hsl(0 0% 50% / 0.25);
outline-offset: 1rem;
}
This part is the CSS code used to style the number items (list items). The .digit class defines the style of numeric items. display: flex;Display numerical items in a flexible box. height: 100%;Set the height of the number item to 100%. padding: 5.5rem 1rem;Set the padding of the number item, 5.5rem in the vertical direction and 1rem in the horizontal direction. .digit:focus-visible Pseudo class sets the outline to be displayed when a numeric item gains focus, and sets the color and offset of the outline.
.digit span {<!-- -->
scale: calc(var(--active, 0) + 0.5);
filter: blur(calc((1 - var(--active, 0)) * 1rem));
transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
}
This part is the CSS code used to style the numbers ( elements). The .digit span selector defines the style of numbers. The scale attribute sets the scaling ratio of the number through calculation. The scaling ratio is controlled by the variable --active, and the initial value is 0. The filter attribute sets the blurring effect of numbers through calculation. The degree of blurring is controlled by the variable --active, and the initial value is 0. The transition attribute defines the animation effect of the number during the change process, including the scaling ratio and blur level.
ul {<!-- -->
padding: 0;
margin: 0;
}
.digit:first-of-type {<!-- -->
padding-left: 5rem;
}
.digit:last-of-type {<!-- -->
padding-right: 5rem;
}
This part is the CSS code used to style the unordered list (ul) and the padding of the first and last numeric items. The ul selector sets the padding and margins of the unordered list to 0 to eliminate the default style. The .digit:first-of-type selector sets the left padding of the first digit item to 5rem, which increases the left spacing of the digit combination. The .digit:last-of-type selector sets the last digit to the right of the item
Complete code
html section
<section>
<p>sliding display</p>
<ul class="code">
<li tabindex="0" class="digit">
<span>0</span>
</li>
<li tabindex="0" class="digit">
<span>3</span>
</li>
<li tabindex="0" class="digit">
<span>4</span>
</li>
<li tabindex="0" class="digit">
<span>8</span>
</li>
<li tabindex="0" class="digit">
<span>7</span>
</li>
<li tabindex="0" class="digit">
<span>2</span>
</li>
</ul>
</section>
css section
* {<!-- -->
box-sizing: border-box;
}
body {<!-- -->
min-height: 100vh;
display: grid;
place-items: center;
font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
background: hsl(0 0% 0%);
gap: 2rem;
}
body::before {
--line: hsl(0 0% 95% / 0.25);
content: "";
height: 100vh;
width: 100vw;
position: fixed;
background:
linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
mask: linear-gradient(-15deg, transparent 30%, white);
top: 0;
z-index: -1;
}
section {<!-- -->
display: grid;
gap: 4rem;
align-items: center;
justify-content: center;
}
section p {<!-- -->
margin: 0;
font-size: 2.25rem;
color: hsl(0 0% 40%);
text-align: center;
color: #d5d0d0;
background-clip: text;
}
.code {<!-- -->
font-size: 3rem;
display: flex;
flex-wrap: nowrap;
color: hsl(0 0% 100%);
border-radius: 1rem;
background: hsl(0 0% 6%);
justify-content: center;
box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
}
.code:hover {<!-- -->
cursor: grab;
}
.digit {<!-- -->
display: flex;
height: 100%;
padding: 5.5rem 1rem;
}
.digit:focus-visible {<!-- -->
outline-color: hsl(0 0% 50% / 0.25);
outline-offset: 1rem;
}
.digit span {<!-- -->
scale: calc(var(--active, 0) + 0.5);
filter: blur(calc((1 - var(--active, 0)) * 1rem));
transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
}
ul {<!-- -->
padding: 0;
margin: 0;
}
.digit:first-of-type {<!-- -->
padding-left: 5rem;
}
.digit:last-of-type {<!-- -->
padding-right: 5rem;
}
:root {
--lerp-0: 1; /* === sin(90deg) */
--lerp-1: calc(sin(50deg));
--lerp-2: calc(sin(45deg));
--lerp-3: calc(sin(35deg));
--lerp-4: calc(sin(25deg));
--lerp-5: calc(sin(15deg));
}
.digit:is(:hover, :focus-visible) {
--active: var(--lerp-0);
}
.digit:is(:hover, :focus-visible) + .digit,
.digit:has( + .digit:is(:hover, :focus-visible)) {
--active: var(--lerp-1);
}
.digit:is(:hover, :focus-visible) + .digit + .digit,
.digit:has( + .digit + .digit:is(:hover, :focus-visible)) {
--active: var(--lerp-2);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
.digit:has( + .digit + .digit + .digit:is(:hover, :focus-visible)) {
--active: var(--lerp-3);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
.digit:has( + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
--active: var(--lerp-4);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
.digit:has( + .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
--active: var(--lerp-5);
}
GIF effect display
