酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源资讯

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

CSS实现头像与国旗融合的代码

来源:酷站 作者:秩名 人气: 发布时间:2021-10-24
本篇文章主要介绍了CSS实现头像与国旗融合的代码,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

到国庆了,大家都急着给祖国母亲庆生。

每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款:

emm,很不错。

那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何简单实现呢?

有人认为是改变其中一张图的透明度,实际上不是的。仔细观察合成后的头像,最左边的基本上只能看到红旗看不到原本的头像内容,而最右边基本只能看到头像而不再显示红旗的红色背景。

在 CSS 中使用 mask 遮罩,一行代码实现头像与国旗的融合

在 CSS 中,我们仅仅需要将两张图片叠加在一起,对上层的图片使用 mask 属性,一行代码即可实现该效果。

div {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    // 正常头像
    background: url(image1) no-repeat;
    background-size: cover;
}
.div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // 国旗图片
    background: url(image2) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}

在上面的代码中,我们利用了 div 和它的一个伪元素 div::after,实现了将头像和国旗叠加在一起。

只需要在 div::after 中,设置一层 mask 遮罩 mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent),我们就可以实现头像与国旗的巧妙叠:

简单介绍下 Mask

在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

最基本,使用 mask 的方式是借助图片,类似这样:

{

    /* Image values */

    mask: url(mask.png);                       /* 使用位图来做遮罩 */

    mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */

}

类似如下使用方法:当然,借助图片的方式其实比较繁琐,因为我们首先还得准备相应的图片素材,除了图片,mask 还可以接受一个类似 background 的参数,也就是渐变。

1

2

3

{

    mask: linea

下面这样一张图片,叠加上一个从透明到黑色的渐变,

1

2

3

4

{

    background: url(image.png) ;

    mask: linear-gradient(90deg, transparent, #fff);

}

应用了 mask 之后,就会变成这样:

这个 DEMO,可以先简单了解到 mask 的基本用法。

这里得到了使用 mask 最重要结论:图片与 mask 生成的渐变的 transparent 的重叠部分,将会变得透明。

值得注意的是,上面的渐变使用的是 linear-gradient(90deg, transparent, #fff),这里的 #fff 纯色部分其实换成任意颜色都可以,不影响效果。

利用 Mask 的其他一些小技巧

当然,掌握了 Mask 之后,可以玩出非常多花来。

譬如上述的国旗头像,我们可以配合 CSS @property,实现一些有意思的 hover 效果:

或者利用 mask 实现一些趣味转场效果:

甚至乎,弹幕网站的人物遮挡弹幕,都是利用 CSS mask 实现的:

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/css/794651.html

相关文章

  • css实现背景颜色半透明的两种方法介绍

    css实现背景颜色半透明的两种方法介绍

    在页面布局时,为了给用户不一样的视觉效果,需要设置div的背景颜色为半透明状态,你知道怎么设置吗? 接下来,就和大家聊聊如何用两种方式使div的背景颜色变成半......
    12-05
  • CSS实现切角+边框+投影+内容背景色渐变效果

    CSS实现切角+边框+投影+内容背景色渐变效果

    单纯用css实现切角+边框+投影+内容背景色渐变所有效果,因为UI没给背景切图,寻思这个理论上用css就能实现。 看一下最终要实现的效果: 首先不谈内容紫蓝色渐变,一......
    10-27
  • CSS实现头像与国旗融合的代码

    CSS实现头像与国旗融合的代码

    到国庆了,大家都急着给祖国母亲庆生。 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错。 那么,将一张国旗图片与我们的头......
    10-24
  • css边框添加四个角的实现代码介绍

    css边框添加四个角的实现代码介绍

    1、html div class=loginbody div class=border_corner border_corner_left_top/div div class=border_corner border_corner_right_top/div div class=border_corner border_corner_left_bottom/div div class=border_corner border_corn......
    10-17
  • 使用CSS3实现按钮悬停闪烁动态特效代码

    使用CSS3实现按钮悬停闪烁动态特效代码

    我们先来看看效果图 下面我们来研究一下是怎么实现这个效果的: 首先是HTML部分,定义一个div容器包裹button按钮,在按钮中使用标签对来包含按钮文本 div id=shiny-shadow......
    10-06
  • 能用CSS实现的就不要麻烦JavaScript了

    能用CSS实现的就不要麻烦JavaScript了

    凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来写。Atwood定律 虽然万物都可以是JavaScript,但某种程度css的运行效率会比JavaScript高,所以笔者认为:能用CSS实现的......
    10-06
  • CSS在DevTools中架构演变的介绍

    CSS在DevTools中架构演变的介绍

    DevTools 中 CSS 的先前状态 DevTools 以两种不同的方式实现 CSS: 一种用于DevTools遗留部分中使用的 CSS 文件 另一种用于 DevTools 中使用的现代 Web 组件。 对于第一种遗留部分的......
    09-30
  • CSS布局之浮动(float)和定位(position)属性的区别

    CSS布局之浮动(float)和定位(position)属性的区别

    CSS 布局 - position 属性 position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。 position 属性 position 属性规定应用于元素的定位方法的类型。......
    09-27
  • CSS动画如何中途停止并维持姿态的介绍

    CSS动画如何中途停止并维持姿态的介绍

    我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动......
    09-27
  • 使用CSS实现一个搜索引擎的原理介绍

    使用CSS实现一个搜索引擎的原理介绍

    在CSS中,我们通过selector(选择器)选择样式片段: .title { color: red;} 简而言之,选择器title对应样式color: red; 换个角度,我们也可以说:关键词.title对应数据color: red; 在我......
    09-21