LPL Ban/Pick 选人阶段的遮罩效果是如何实现的?

更新日期: 2022-02-16阅读: 765标签: 效果

最近 S11 LPL 春季赛开赛,在看比赛的过程中,我发现新赛季的 Ban/Pick 选人阶段,出现了一种新的,有意思的遮罩效果,如下图所示:


当然,它是一个动态的效果,当选人的过程中,会有一种呼吸的效果:


Gif 图有点糊,总的而言,就是一种接近迷雾的遮罩效果。并且,他是能够动态变化的。

本文将探究,在 css 中,我们应该如何去实现类似的效果。

实现烟雾化遮罩效果

首先,我们来尝试实现这样一个动态遮罩,假设没有模糊的边缘,及烟雾化的效果,它其实就是一个渐变:

<div></div>
div {
    width: 340px;
    height: 180px;
    border: 2px solid #5b595b;
    background: linear-gradient(
        rgba(229, 23, 49, 1),
        rgba(229, 23, 49, .9) 48%,
        transparent 55%,
    );
}

经由上述代码,我们可得到:


好吧,看着确实平平无奇,我们如何利用它,得到一个雾化的效果呢?

提到烟雾,聪明的同学应该能想到滤镜,当然,是 SVG 的 <feturbulence> 滤镜。

没错,又是它,<feturbulence> 确实太有意思了,我最近的两篇关于它的文章 -- Amazing!!CSS 也能实现烟雾效果?、Amazing!!CSS 也能实现极光? 可以一并阅读。

<feturbulence> 的 type="fractalNoise" 在模拟云雾效果时非常好用。该滤镜利用 Perlin 噪声函数创建了一个图像,能够实现半透明的烟熏或波状图像,用于实现一些特殊的纹理。

这里,我们利用 <feturbulence> 滤镜简单处理一下上述图形:

<div></div>

<svg width="0">
  <filter id="filter">
    <feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" />
    <feDisplacementMap in="SourceGraphic" scale="30" />
  </filter>
</svg>

CSS 中,可以利用 filter: url() 对对应的元素引入该滤镜:

div {
    ...
    filter: url(#smoke);
}

作用了滤镜的元素的效果:


由于我给元素加了边框,整个边框也被雾化了,这不是我们想要的,可以使用伪元素改造一下,边框作用于容器,使用伪元素实现渐变,将滤镜作用于伪元素

div {
    position: relative;
    width: 340px;
    height: 180px;
    border: 2px solid #5b595b;
    
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            30deg,
            rgba(229, 23, 49, 1),
            rgba(229, 23, 49, .9) 48%,
            transparent 55%,
        );
        filter: url(#smoke);
    }
}

改造后的效果如下:


好,又接近了一步,但是四周有很多瑕疵没有被填满。问题不大,我们改变一下定位的 top \ left \ right \ bottom,让伪元素超出父容器,父容器设置 overflow: hidden 即可:

div {
    ....
    overflow: hidden;
    
    &::before {
        ....
        left: -20px;
        top: -10px;
        right: -20px;
        bottom: -20px;
        background: linear-gradient(
            30deg,
            rgba(229, 23, 49, 1),
            rgba(229, 23, 49, .9) 48%,
            transparent 55%,
        );
        filter: url(#smoke);
    }
}

调整之后,看看效果:


有点那感觉了,下一步,只需要让烟雾元素动起来,为了让整个效果连贯(由于 SVG 动画本身不支持类似 animation-fill-mode: alternate 这种特性),我们还是需要写一点 JavaScript 代码,控制动画的整体循环。

大概的代码是这样:

const filter = document.querySelector("#turbulence");
let frames = 1;
let rad = Math.PI / 180;
let bfx, bfy;

function freqAnimation() {
    frames += .35;

    bfx = 0.035;
    bfy = 0.015;

    bfx += 0.006 * Math.cos(frames * rad);
    bfy += 0.004 * Math.sin(frames * rad);

    bf = bfx.toString() + " " + bfy.toString();
    filter.setAttributeNS(null, "baseFrequency", bf);

    window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

这段代码做的事情,其实只有一个,就是让 SVG 的 #turbulence 滤镜的 baseFrequency 属性,在一个区间内无限循环,仅此而已。通过改变 baseFrequency,让整个烟雾不断变化。

至此,我们就得到了一幅完整的,会动的烟雾遮罩.

完整的代码,你可以戳这里 -- CodePen Demos -- LPL BAN PICK MASK Effect


实现呼吸状态的遮罩效果

在上述基础上,再加入呼吸的效果,其实就非常简单了。

我们只需要去改变渐变的一个位置即可,方法非常多,这里我给一个较为优雅但是兼容性可能没那么好的方法 -- CSS @property。

简单改造上述代码:

@property --per {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 22%;
}
div::before {
    ...
    background: linear-gradient(
        30deg,
        #ff0020,
        rgba(229, 23, 49, .9) var(--per),
        transparent calc(var(--per) + 8%),
    );
    filter: url(#smoke);
    animation: change 2s infinite ease-out;
}
@keyframes change {
    50% {
        --per: 18%;
    }
}

这样,呼吸效果就实现了:


完整的代码,你可以戳这里 -- CodePen Demos -- LPL BAN PICK MASK Effect

原文来自:https://www.cnblogs.com/coco1s/archive/2022/02/15/15895408.html


链接: https://fly63.com/article/detial/11174

使用 JavaScript 实现分屏视觉效果

今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。

CSS3的过渡效果,使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。

js如何实现新手引导效果?

js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。

css3 斜切角/斜边的实现方式

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现

纯css实现气泡效果

主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。

Vue 中多个元素、组件的过渡,及列表过渡

多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!