【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

这篇具有很好参考价值的文章主要介绍了【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近,在 Steam 玩一款老游戏(生化危机 4 重置版),其中,每当游戏转场的过程中,都有这么一个有趣的 Loading 动画:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

整个效果有点类似于日食效果,中间一圈黑色,向外散发着太阳般的光芒。

本文,我们将尝试使用 CSS,还原这个效果。

整个效果做出来,类似于如下两个动画效果这样:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

实现主体效果

其实,整个效果,去掉中间黑色的遮罩,是这个样子的:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

所以,我们的目标就变成了,如何使用 CSS,实现上述这个图形效果。

角向渐变

到这里,思考一圈 CSS 中的各种属性,和这个图形能挂上钩的,几乎就只有角向渐变 conic-gradient 了。

我们可以利用多重角向渐变,试着画一个类似的图形 -- 从单个颜色到透明,再多次循环铺满 360° 的整个图形

<div></div>
body {
    background: #000;
}
div {
    width: 200vw;
    height: 200vh;
    background: 
        repeating-conic-gradient(
            rgba(0, 136, 204, 0.77), 
            rgba(150, 157, 100, 0.72) 2%, 
            rgba(230, 247, 200, 0.82) 3%, 
            transparent 4%,
            transparent 5%
    );
}

我们随机设置了 conic-gradient() 中的颜色 A颜色 B颜色 C到透明的变化,可以得到这么一张图形:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

注意,对于上面的颜色没有任何要求,随机设置都可以。

我们可以让这个图形旋转起来,简单加上一个旋转动画:

div {
    animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate { 
    to { 
        transform: rotate(1turn); 
    } 
}

效果如下:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

我们仔细观察一下,我们要的最终效果,其实要求边缘是毛刺状,而不是连续的图像:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

这一步要怎么实现呢?其实也非常简单,我们只需要在原图像上,叠加一层从图像主色到黑色的径向渐变即可

我们可以借助伪元素实现这个叠加遮罩:

div::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(150, 157, 100, 0.32), rgba(0, 0, 0, 1) 45vmin, rgba(0, 0, 0, 1));
}

这里我们实现了这么一个渐变:

  • radial-gradient(rgba(150, 157, 100, 0.32), rgba(0, 0, 0, 1) 45vmin, rgba(0, 0, 0, 1)):其核心就是实现了从某一个实体颜色(选取一个上面角向渐变图形用到的主要颜色)到黑色的一个径向渐变效果

这样,我们就将边缘改造的不那么突兀了!

效果如下:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

设置多层背景

基于上述的原理及技巧,我们重新构思一下整个动画,上面只有一层角向背景的背景在运动。

那么,如果我们设置多层背景,并且,设置他们正向、反向一起运动呢?

我们来实现一个 4 层角向渐变背景的动画效果,并且使用最终我们想要的黄色为主题色,:

<div class="g-container">
    <div class="g-circle g-circle1"></div>
    <div class="g-circle g-circle2"></div>
    <div class="g-circle g-circle3"></div>
    <div class="g-circle g-circle4"></div>
</div>

完整的 CSS 代码如下:

body{
    width: 100%;
    height: 100%;
    background: #000;
}

.g-container {
    position: absolute;
    width: 80vmax;
    height: 80vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .g-circle {
        position: absolute;
        inset: 0;
        border-radius: 50%;
    }
    
    .g-circle1 {
        background: 
            repeating-conic-gradient(
                from 0deg at 50% 50%,
                transparent 0%,
                rgba(255, 230, 8, 0.69) 1%,
                transparent 6%
        );
        animation: 13s linear rotate infinite reverse;
    }
    
    .g-circle2 {
        background: 
            repeating-conic-gradient(
                from 19deg at 50% 50%,
                transparent 0%,
                rgba(250, 240, 20, 0.78) 1.2%,
                rgba(250, 240, 20, 0.78),
                transparent 4.8%,
                transparent 7.6%
        );
        animation: 9s linear -2s rotate infinite;
    }
    
    .g-circle3 {
        background: 
            repeating-conic-gradient(
                from 37deg at 50% 50%,
                transparent 0%,
                rgba(250, 240, 20, 0.78) 4%,
                transparent 7.9%,
                transparent 12%
        );
        animation: 17s linear rotate infinite reverse;
    }
    
    .g-circle4 {
        background: 
            repeating-conic-gradient(
                from 103deg at 50% 50%,
                transparent 0%,
                rgba(250, 240, 20, 0.5) 5%,
                rgba(250, 240, 20, 0.27) 7%,
                transparent 12%
        );
        animation: 7s linear rotate infinite;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

上面的代码,做了几件核心事情:

  1. 4 层背景重叠在一起
  2. 4 层背景设置不同的重复角向渐变图案 repeating-conic-gradient()
  3. 4 层背景两个顺时针旋转、两个逆时针旋转
  4. 动画的参数各不相同

这样,我们能得到这么一个效果:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

此时,我们再在上述图形的基础上,叠加上一层遮罩 mask,将图案的边缘黑化:

<div class="g-container">
    <div class="g-circle g-circle1"></div>
    <div class="g-circle g-circle2"></div>
    <div class="g-circle g-circle3"></div>
    <div class="g-circle g-circle4"></div>
 +  <div class="g-circle g-mask"></div>
</div>
.g-container .g-mask {
    position: absolute;
    inset: -200px;
    background: 
        radial-gradient(
            rgba(250, 240, 20, 0.2) 0,
            rgba(0, 0, 0, .8) calc(40vmax - 15vmax),
            #000 calc(40vmax - 5vmax),
            #000 100%
        );
}

这里是一个比原容器稍微大的新容器(注意 inset: 200px),再设置从中心想外的径向渐变,最外层颜色为黑色。

这样,我们就能得到我们想要的效果了:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

到这里,完整的代码,你可以戳这里:CodePen Demo -- Conic-gradient Pic

使用混合模式

当然,上述其实只是一种实现该图形动画的方式。

我们还可以借助混合模式,得到类似的效果。

这一次,我们将借助 SASS 的随机函数,随机生成不同的角向渐变背景,大致的代码如下:

<div></div>
@function randomNum($max, $min: 0, $u: 1) {
	@return ($min + random($max)) * $u;
}

@function randomConicGradient() {
	$n: 16 + random(16);
	$list: ();
	
	@for $i from 0 to $n {
		$list: $list, rgba(hsl(100, randomNum(250, 5, 10%), randomNum(1, 1, 1%)), randomNum(100, 0, .01));
	}
		
	@return conic-gradient($list, nth($list, 1));
}

body {
    overflow: hidden;
}

div {
    width: 100vw;
    height: 100vh;
	margin: 0;
	background: 
		radial-gradient(hsl(9, randomNum(100, 75, 1%), randomNum(100, 75%, 1%)), black);
	
	&:before, &:after {
		position: absolute;
		top: 50%; left: 50%;
		margin: -100vmax; 
		width: 200vmax; 
                height: 200vmax;
		opacity: .5;
		animation: rotate randomNum(100, 25, .1s) ease-in-out infinite;
		content: '';
	}
	
	&:before { background: randomConicGradient(); }
	&:after {
		background: randomConicGradient();
		animation-duration: randomNum(100, 25, .1s);
		animation-direction: reverse;
	}
}

@keyframes rotate { 
    to { 
        transform: rotate(1turn); 
    } 
}

上述的代码核心做了 3 件事:

  1. 元素本身设置了一个简单的从随机颜色到黑色的径向渐变
  2. 元素的两个伪元素借助 SASS 随机生成不同的角向渐变背景
  3. 两个伪元素做反向的旋转动画

这样,我们可以得到这么一种随机效果:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

这里可能大家光看代码还是会有些费劲,我给大家再拆解一下,上面的图形,大致是由下述方式叠加而来(由于颜色都是随机生成的,所以更多的看每个结构实现了什么样的图形):

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

嘿,有点意思,不过别急,此时,我们再给两个伪元素,添加上一个混合模式 mix-blend-mode: overlay

div {
    // ...
	
    &:before, &:after {
        mix-blend-mode: overlay;
    }
}

这样,整个效果就变成了:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

由于,颜色是随机的,刷新页面或者简单改变一些颜色参数,得到的效果就会很不一样,也有可能是这样的:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

或者这样的:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

借助混合模式,我们实现了更为酷炫的效果,上述的 DEMO,完整的代码在这里:CodePen Demo -- Animation conic-gradient

还原题图效果

好,到这里,我们再回归最开始我们希望实现的效果:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

有了上面的铺垫,再看这个效果就没那么复杂了,本质就是在我们上述实现的图形中间,镂空一个黑色区域。

首先,我们借助上述铺垫的内容,实现这么一个图形:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

接着,我们在内部,通过 mask,进行一个径向渐变的镂空即可,加上这么一句简单的代码:

div {
    mask: radial-gradient(transparent, transparent 55%, #000 56%, #000);
}

需要结合实现 background 的参数进行调试。

这样,我们就成功的实现一个类似的 Loading 图形:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

完整的代码,你可以戳这里:CodePen Demo -- Animation conic-gradient & Mask

我们再看一个由 CodePen 上由 Yoav Kadosh 实现的另外一个原理类似的有意思的效果:

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

经由本文介绍的技巧,我们还可以演化出许多有意思的效果,读者朋友可以自行探索!

当然,我们不难看出,CSS 还是非常有意思的。

最后

好了,本文到此结束,希望对你有帮助 😃

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。文章来源地址https://www.toymoban.com/news/detail-710573.html

到了这里,关于【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端demo】背景渐变动画

    其他demo 效果预览:https://codepen.io/karshey/pen/OJrXZwQ 注意,直接在body上加 height:100% 可能也会出现height为0的情况,这是需要令html的 height:100% html css

    2024年02月10日
    浏览(53)
  • 图片或视频充当网页背景+过渡动画

    这是目前的主页预览图。上一个版本带有学校logo,根据比赛规则,删掉了学校logo。 也就是将图片作为背景。 这个需求产生的场景是:如果直接用img标签显示界面左上角的logo,那么鼠标右键是可以直接选中图片的,也可以通过拖动的方式选中,跟文字一样。 而对于大多数现

    2024年04月14日
    浏览(58)
  • JavaScript实现背景图像切换3D动画效果

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2023年04月20日
    浏览(55)
  • CSS 圆形分割按钮动画 带背景、图片

     

    2024年02月01日
    浏览(45)
  • CSS 实现 Turbo 官网 3D 网格线背景动画

    转载请注明出处,点击此处 查看更多精彩内容 查看 Turbo 官网 时发现它的背景动画挺有意思,就自己动手实现了一下。下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里。 简单说明原理:使用 mask-image 遮罩绘制网格,使用 perspective 及 rotate 动画设置 3D 纵深效

    2024年02月17日
    浏览(46)
  • Android进阶之路 - 背景阴影、阴影背景

    不知道你是不是也经常听到这些话:你这个没有阴影效果;你这个阴影太浓了;你这个阴影太粗了;你这个阴影太实了;你这个阴影颜色也不对,你这个阴影… 在正式开发中,临近上线前有个环节叫UI验收(产品验收在其前后均可),主要查看开发效果与设计图是否统一,当

    2024年02月04日
    浏览(40)
  • 【动画进阶】当路径动画遇到滚动驱动!

    我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 本文,我们将一起利用纯 CSS,实现如下这么个酷炫的效果: 在一年前,我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline :革命性创新,动画杀手锏 @scro

    2024年02月08日
    浏览(38)
  • Three.js 进阶之旅:滚动控制模型动画和相机动画 ?

    声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 专栏上篇文章《Three.js 进阶之旅:页面*滑滚动-王国之泪》 讲解并实现了如何使用 R3F 进行页面图片*滑滚动,本文内容在上节的基础上,学习

    2024年02月06日
    浏览(52)
  • 【动画进阶】单标签下多色块随机文字随机颜色动画

    我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 在 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中,我们利用纯 CSS,实现了一个非常 Amazing 的动画效果: 其中一个核心点就是,我们利用了如下的代码,在一个 DIV 平

    2024年02月07日
    浏览(42)
  • uniGUI学习之进度条显示UniHTMLFrame1模糊圆点粒子背景动画特效(58)

    01]静态进度条 02]模糊圆点粒子背景动画特效 03]动态进度条 01]静态进度条 效果图:   // 这里设置默认初始步骤 StepContentFn(\\\'.starBox\\\', \\\"已申请:杨博:2020/2/3:已申请审批意见, 已立项:杨博:2020/5/5:已立项审批意见, 实施中:张三:2020/5/9:实施中意见 , 等待中 :杨博:2020/6/6:等待中审批意见

    2024年02月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包