How to try to add sticky effects to your CSS

Time:2021-12-30

Write in front

I don’t know who first discovered that filter: blur and filter: contrast can have such wonderful chemical reactions, but it’s not important. What’s important is that if you learn how to use this special effect, you can add cool effects to your web page! Then please look at two small demos first

demo

 

How do you do it?

Look carefully, the elements on the web page seem to have viscosity. When the elements are close enough, there will be a fusion effect. When the elements are far away, there will be a sticking effect. How can this be completed?

It’s very simple. You just need to add filter: blur to the child element and add contrast to its parent element

They look like this (let’s take a simpler demo as an example):

Code part:


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

 .wrapper{
            width: 100%;
            height: 100vh;
            position: absolute;
            background-color: #333;
            filter:contrast(50)
        }
        .container {
            position: absolute;
            top:50%;
            left:50%;
            width: 200px;
            height: 100px;
            background-color: #00eeff;
            filter: blur(10px) ;
        } 
        .box{
            width:25px;
            height:25px;
            background-color: #00eeff;
            border-radius: 50%;
            position: absolute;
            left:50%;
            transition: 1s;
            filter: blur(1px);
            animation: move 1s linear infinite;
         }
   @keyframes move {
       0%{
           transform: translateY(0);
       }
       100%{
           transform: translateY(-100px);
       }
   }

You can always copy the code and try it yourself!

Principle:

When all elements have the blur attribute, the upper parent has no contrast (hereinafter referred to as Figure 1) and the lower parent has contrast (hereinafter referred to as Figure 2). When elements are fused, do you find that figure 1 also has the effect of fusion! It’s just not clear. It’s all caused by blur, and the contrast attribute can fight against ambiguity well, reaching the effect of Figure 2.

See the figure below

This is the end of this article about trying to add viscous effect to your CSS. For more relevant CSS to add viscous content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!