Implement a homomorphic effect using CSS

Posted: 2024-03-25 14:09:44 Author: A coding Shark I would like to comment

This week learned a new noun, homomorphism, homomorphism can be understood as a special form of it, this article mainly introduces in detail how to use CSS to achieve this homomorphism effect, the example code explained in detail, interested partners can understand

introduction

I learned a new noun this week, homomorphism. Homomorphism can be understood as a special form, before I see the specific effect, I do not know how to describe it, even if I see the specific effect, I can only describe it as a special form. Without further ado, you will directly see the effect preview below.

Effect preview

The above is the final effect, let's go step by step to achieve it.

HTML

We first look at the HTML section, which is the basis of the effect. The relevant code is as follows.

  <div class="container">
      <div class="box"></div>
    </div>

Here we create two

elements,

: This is a container element that is commonly used to wrap content and apply styling.

: This is a box element inside the container.

Writing CSS up to now, including in everyday development, we often use naming methods like container and box. The use of labels and class names combines semantic and style definitions, and such class names are readable, specifying the appearance, arrangement, or animation of the two elements. This structure is for good code organization and maintainability, while also simplifying the management of styling and interaction effects of page elements.

CSS

And then we have to add to the effect. The relevant code is as follows.

.container {
  background-color: #f0f0f0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

The first is the style of the.container class. Set the background color of the container to light gray, and set the width and height of the container to the width and height of the viewport so that it takes up the entire screen. Then use the classic three-piece code display: flex; justify-content: center; align-items: center Displays the contents of the container horizontally and vertically.

.box {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background-color: #f0f0f0;
  box-shadow: 0 0 0 #ccc, 0 0 0 #fff, 10px 10px 10px #ccc inset;
  animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
}

@keyframes anime { 0% { width: 60px; height: 60px; background-color: #f0f0f0; box-shadow: 0 0 0 #ccc, 0 0 0 #fff, 10px 10px 10px #ccc inset, -10px -10px -10px #fff inset; } 25% { width: 60px; height: 60px; background-color: #f8f8f8; box-shadow: 10px 10px 10px #ccc, 10px 10px 10px #fff, 0 0 0 #ccc inset, 0 0 0 #fff inset; } 50% { width: 60px; height: 240px; background-color: #f8f8f8; box-shadow: 10px 10px 10px #ccc, 10px 10px 10px #fff, 0 0 0 #ccc inset, 0 0 0 #fff inset; } 100% { width: 480px; height: 240px; background-color: #fafafa; box-shadow: 40px 40px 40px #ccc, 0 0 0 #fff, 0 0 0 #ccc inset, 2px 2px 2px #fff inset; }}

Here is the style of the.box class and includes the animation effect. Initially, set the width and height of the box to 60px, and set the rounded corners of the box to 20px. Then use box-shadow to add the shadow effect of the box, including the outer shadow and the inner shadow.

animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate; : Apply a keyframe animation called anime that lasts 3 seconds, uses the caching function cubic-bezier, starts with a delay of 1 second, loops indefinitely and executes the animation in each alternate direction. The animation effect from the initial state to the end state is defined by keyframes. At different percentage points, set different width and height, background color, box shadow and other attribute values, to achieve the box size and color gradient effect. At 50%, the height of the box becomes 240px, giving a magnified effect. At 100%, the width of the box becomes 480px, the height remains 240px, and the background color and shadow effect change, completing the animation cycle.

Through the above code can achieve a simple homomorphic animation effect, so that the box in size and color presented multiple changes, enhance the visual appeal of the page.

Sum up

Here is the implementation process of the entire effect, the code is simple to understand, in addition, interested partners can also divergent thinking on the existing basis, such as adding other effects and so on.

This article on the use of CSS to achieve a homomorphic effect is introduced to this, more related CSS content please search the script house previous articles or continue to browse the following related articles, I hope you will support the script house in the future!

Tag: css homomorphism

Use CSS for simple page-turning effects

This article mainly introduces in detail how to use CSS to achieve a simple page-turning effect, the example code in the article explains in detail, has a certain reference value, there is a need for small partners can follow Xiaobian to learn together
2024-03-06
Use CSS to complete the parallax scrolling effect

In web design, parallax scrolling effect can bring users an immersive browsing experience, this article mainly introduces in detail how to use CSS to complete the parallax scrolling effect, the example code in the article explains in detail, interested partners can follow
2024-02-28
CSS for a nice spotlight effect

This article mainly introduces in detail how to use -webkit-background-clip and clip-path in CSS, and achieves a beautiful spotlight effect with animation properties. Interested partners can follow Xiaobi to learn together
2024-02-27
The CSS implements the parallax scrolling effect of clipping mask

Responsive clipping mask parallax scrolling effect is a visual effect technology commonly used in web design, this article will introduce CSS to achieve clipping mask parallax scrolling effect, has a certain reference value, interested in you can understand
2024-02-27
CSS implements the menu arrow animation effect

Arrow animation is a common interactive element, can be used to guide users in the web page, this article mainly introduces the CSS to achieve the menu arrow animation effect, has a certain reference value, interested can understand
2024-02-23
Use CSS to erase multiple lines of text

Today to achieve a multi-line text erase effect, there is a sense of reading the poem before the performance of the classic chant spread program, in fact, I have encountered such a need at work when it was achieved by other methods, the need of friends can be involved
2024-02-18
Implement a raindrop drop effect using CSS

This article mainly introduces in detail how to use CSS to achieve a raindrop effect, the example code in the article explains in detail, has certain reference value, interested partners can follow Xiaobian together to learn about it
2024-02-02
The CSS animates leaves blown by the wind

This article mainly introduces in detail how to achieve a simple CSS wind blowing leaves animation effect, the example code in the article explains in detail, has a certain reference value, interested partners can follow Xiaobian together to learn
2024-01-05
Use CSS implementation to implement the breath light effect

In modern front-end development, adding attractive animation effects to the website is a common way to improve the user experience, among which, the breath light effect is a simple and compelling animation, below follow the small series together to learn how to use CSS
2023-12-25
Implement a rolling shadow effect using CSS

In order to good user experience, it is necessary to add a shadow bar on the top of the container that can be scrolled, prompting users to scroll up. This article mainly introduces in detail how to use CSS to achieve a simple scrolling shadow effect
2023-12-12