📜  如何使用 HTML 和 CSS 删除填充颜色以更改图像颜色?

📅  最后修改于: 2021-11-08 05:29:18             🧑  作者: Mango

在本文中,我们将使用 HTML 和 CSS 创建一个 Drop 填充颜色效果,其中当我们将鼠标悬停在图像上时,图像会被着色。当您将鼠标悬停在图像上时,会出现一滴颜色落在图像上,从而将图像的颜色从灰色变为彩色。

方法:

  1. 创建一个 HTML 文件,在其中添加文本和图像的 div。
  2. 然后我们必须使用悬停属性来使我们的图像着色。
  3. 我们还在项目中使用了像 ::before 和 ::after 这样的伪类。
  4. 使用@keyframes 来移动我们的水滴。

HTML代码:

  • 首先,创建一个 HTML 文件 (index.html)。
  • 然后将提供所有动画效果的 CSS 文件链接到我们的 HTML。它也被放置在 部分内。
  • 来到我们 HTML 代码的正文部分:
    • 首先,我们必须创建一个主div。
    • 然后,我们给主 div 一个类,并在当前 div 中创建另一个 div 以将图像放入其中。
HTML


 

 
    

 

    

        hover over the icon to         get the icon colored     

          
        
    
 


HTML
/* Restoring the browser effects */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* Applying all of the same
functionalities to the body */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    height: 100vh;
}
 
h1{
    color: rgb(0, 255, 115);
    margin-right: 2em;
}
 
.main_box{
    width: 15em;
    height: 15em;
    position: relative;
    cursor: pointer;
}
 
.img,.main_box::before{
    width: 100%;
    height: 100%;
    background-image: url(gfg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
 
/* Changing the image to gray color */
.img{
    filter: grayscale(100%);
}
 
 
/* Code for drop of color */
.main_box::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    clip-path: circle(0 at 50% 0);
    transition: all .3s;
    z-index: 1;
}
 
.main_box::after{
    content: '';
    position: absolute;
    top: -6em;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25em;
    height: 1.25em;
    background-image: linear-gradient(#006800 , #014716);
    border-radius: 0 10em 10em 10em;
    opacity: 0;
    transform: rotate(45deg);
}
 
.main_box:hover::after{
    animation: neeche 0.5s cubic-bezier(1,0,1,.81);
}
 
.main_box:hover::before{
    clip-path: circle(31em at 50% 0);
    transition-delay: .5s;
}
 
@keyframes neeche{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        top: 6em;
    }
}


HTML


 

    

 

    

        hover over the icon to         get the icon colored     

          
        
    
 


CSS 代码: CSS 用于为我们的 HTML 页面提供不同类型的动画和效果,使其看起来对所有用户都具有交互性。

在 CSS 中我们必须提醒以下几点——

  1. 恢复所有浏览器效果。
  2. 使用类和 id 为 HTML 元素赋予效果。
  3. 使用 :hover 来使用悬停效果。
  4. 使用@keyframes 来移动我们的水滴。
  5. 伪类的使用。

HTML

/* Restoring the browser effects */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* Applying all of the same
functionalities to the body */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    height: 100vh;
}
 
h1{
    color: rgb(0, 255, 115);
    margin-right: 2em;
}
 
.main_box{
    width: 15em;
    height: 15em;
    position: relative;
    cursor: pointer;
}
 
.img,.main_box::before{
    width: 100%;
    height: 100%;
    background-image: url(gfg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
 
/* Changing the image to gray color */
.img{
    filter: grayscale(100%);
}
 
 
/* Code for drop of color */
.main_box::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    clip-path: circle(0 at 50% 0);
    transition: all .3s;
    z-index: 1;
}
 
.main_box::after{
    content: '';
    position: absolute;
    top: -6em;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25em;
    height: 1.25em;
    background-image: linear-gradient(#006800 , #014716);
    border-radius: 0 10em 10em 10em;
    opacity: 0;
    transform: rotate(45deg);
}
 
.main_box:hover::after{
    animation: neeche 0.5s cubic-bezier(1,0,1,.81);
}
 
.main_box:hover::before{
    clip-path: circle(31em at 50% 0);
    transition-delay: .5s;
}
 
@keyframes neeche{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        top: 6em;
    }
}

完整代码:

HTML



 

    

 

    

        hover over the icon to         get the icon colored     

          
        
    
 

输出 :